From 7314367e49578c8ec687fbfea61bc94479173e30 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Thu, 23 Jan 2025 19:40:36 +0300
Subject: [PATCH 01/32] Profile Settings

---
 .../profile/components/ApiTokens.tsx          | 110 ++++++++++++++++++
 .../profile/components/MyProfile.tsx          |  70 +++++++++++
 .../profile/components/PasswordEdit.tsx       |  69 +++++++++++
 .../profile/components/ProfileTabs.tsx        |  31 +++++
 .../app/(authenticated)/profile/page.tsx      |  11 ++
 5 files changed, 291 insertions(+)
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
 create mode 100644 netmanager-app/app/(authenticated)/profile/page.tsx

diff --git a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
new file mode 100644
index 0000000000..799618cf08
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+
+interface Token {
+  id: string
+  name: string
+  ipAddress: string
+  status: "Active" | "Inactive"
+  created: string
+  token: string
+  expires: string
+}
+
+export default function ApiTokens() {
+  const [tokens, setTokens] = useState<Token[]>([
+    {
+      id: "1",
+      name: "Production API",
+      ipAddress: "192.168.1.1",
+      status: "Active",
+      created: "2023-01-01",
+      token: "abc123xyz789",
+      expires: "2024-01-01",
+    },
+    {
+      id: "2",
+      name: "Development API",
+      ipAddress: "192.168.1.2",
+      status: "Active",
+      created: "2023-02-01",
+      token: "def456uvw890",
+      expires: "2024-02-01",
+    },
+  ])
+
+  const [newTokenName, setNewTokenName] = useState("")
+
+  const handleCreateToken = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Here you would typically send a request to your backend to create a new token
+    const newToken: Token = {
+      id: String(tokens.length + 1),
+      name: newTokenName,
+      ipAddress: "192.168.1." + (tokens.length + 1),
+      status: "Active",
+      created: new Date().toISOString().split("T")[0],
+      token: Math.random().toString(36).substring(2, 15),
+      expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
+    }
+    setTokens([...tokens, newToken])
+    setNewTokenName("")
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">API Access Tokens</h2>
+      <p className="text-sm text-gray-500">
+        Clients are used to generate API tokens that can be used to authenticate with the API. Your secret API tokens
+        are listed below. Remember to keep them secure and never share them.
+      </p>
+      <form onSubmit={handleCreateToken} className="space-y-4">
+        <div className="flex space-x-2">
+          <div className="flex-grow">
+            <Label htmlFor="new-token-name" className="sr-only">
+              New Token Name
+            </Label>
+            <Input
+              id="new-token-name"
+              placeholder="Enter new token name"
+              value={newTokenName}
+              onChange={(e) => setNewTokenName(e.target.value)}
+              required
+            />
+          </div>
+          <Button type="submit">Create New Token</Button>
+        </div>
+      </form>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Client name</TableHead>
+            <TableHead>IP Address</TableHead>
+            <TableHead>Client Status</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead>Token</TableHead>
+            <TableHead>Expires</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {tokens.map((token) => (
+            <TableRow key={token.id}>
+              <TableCell>{token.name}</TableCell>
+              <TableCell>{token.ipAddress}</TableCell>
+              <TableCell>{token.status}</TableCell>
+              <TableCell>{token.created}</TableCell>
+              <TableCell>{token.token}</TableCell>
+              <TableCell>{token.expires}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
diff --git a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
new file mode 100644
index 0000000000..42789aadd1
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
@@ -0,0 +1,70 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export default function MyProfile() {
+  const [profile, setProfile] = useState({
+    name: "John Doe",
+    email: "john@example.com",
+    username: "johndoe",
+  })
+
+  const [isEditing, setIsEditing] = useState(false)
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setProfile({ ...profile, [e.target.name]: e.target.value })
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Here you would typically send the updated profile to your backend
+    console.log("Updated profile:", profile)
+    setIsEditing(false)
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">My Profile</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="name">Name</Label>
+            <Input id="name" name="name" value={profile.name} onChange={handleInputChange} disabled={!isEditing} />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={profile.email}
+              onChange={handleInputChange}
+              disabled={!isEditing}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              name="username"
+              value={profile.username}
+              onChange={handleInputChange}
+              disabled={!isEditing}
+            />
+          </div>
+        </div>
+        {isEditing ? (
+          <Button type="submit">Save Changes</Button>
+        ) : (
+          <Button type="button" onClick={() => setIsEditing(true)}>
+            Edit Profile
+          </Button>
+        )}
+      </form>
+    </div>
+  )
+}
+
diff --git a/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx b/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
new file mode 100644
index 0000000000..b17cbedfb7
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+
+export default function PasswordEdit() {
+  const [passwords, setPasswords] = useState({
+    current: "",
+    new: "",
+    confirm: "",
+  })
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPasswords({ ...passwords, [e.target.name]: e.target.value })
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // Here you would typically send the new password to your backend
+    console.log("Password change request:", passwords)
+    // Reset form after submission
+    setPasswords({ current: "", new: "", confirm: "" })
+  }
+
+  return (
+    <div className="space-y-6">
+      <h2 className="text-2xl font-bold">Change Password</h2>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="current-password">Current Password</Label>
+          <Input
+            id="current-password"
+            name="current"
+            type="password"
+            value={passwords.current}
+            onChange={handleInputChange}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="new-password">New Password</Label>
+          <Input
+            id="new-password"
+            name="new"
+            type="password"
+            value={passwords.new}
+            onChange={handleInputChange}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="confirm-password">Confirm New Password</Label>
+          <Input
+            id="confirm-password"
+            name="confirm"
+            type="password"
+            value={passwords.confirm}
+            onChange={handleInputChange}
+            required
+          />
+        </div>
+        <Button type="submit">Change Password</Button>
+      </form>
+    </div>
+  )
+}
+
diff --git a/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx b/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
new file mode 100644
index 0000000000..e2ce879cda
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useState } from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import MyProfile from "./MyProfile"
+import PasswordEdit from "./PasswordEdit"
+import ApiTokens from "./ApiTokens"
+
+export default function ProfileTabs() {
+  const [activeTab, setActiveTab] = useState("profile")
+
+  return (
+    <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="profile">My Profile</TabsTrigger>
+        <TabsTrigger value="password">Password Edit</TabsTrigger>
+        <TabsTrigger value="api">API Access Tokens</TabsTrigger>
+      </TabsList>
+      <TabsContent value="profile">
+        <MyProfile />
+      </TabsContent>
+      <TabsContent value="password">
+        <PasswordEdit />
+      </TabsContent>
+      <TabsContent value="api">
+        <ApiTokens />
+      </TabsContent>
+    </Tabs>
+  )
+}
+
diff --git a/netmanager-app/app/(authenticated)/profile/page.tsx b/netmanager-app/app/(authenticated)/profile/page.tsx
new file mode 100644
index 0000000000..bef2140964
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/page.tsx
@@ -0,0 +1,11 @@
+import ProfileTabs from "./components/ProfileTabs"
+
+export default function ProfilePage() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-3xl font-bold mb-6">User Profile</h1>
+      <ProfileTabs />
+    </div>
+  )
+}
+

From efeceff568bf9af6275e29899f7f144370ce8ee9 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Thu, 23 Jan 2025 22:09:38 +0300
Subject: [PATCH 02/32] User Details

---
 .../profile/components/MyProfile.tsx          | 208 ++++++++++++++----
 netmanager-app/components/ui/textarea.tsx     |  22 ++
 netmanager-app/package-lock.json              |  23 ++
 netmanager-app/package.json                   |   2 +
 netmanager-app/utils/countries.ts             |  13 ++
 netmanager-app/utils/timezones.ts             |   9 +
 6 files changed, 240 insertions(+), 37 deletions(-)
 create mode 100644 netmanager-app/components/ui/textarea.tsx
 create mode 100644 netmanager-app/utils/countries.ts
 create mode 100644 netmanager-app/utils/timezones.ts

diff --git a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
index 42789aadd1..9404d27be8 100644
--- a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
@@ -1,38 +1,137 @@
-"use client"
+"use client";
 
-import { useState } from "react"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { getCountries } from "@/utils/countries";
+import { getTimezones } from "@/utils/timezones";
+import { users } from "@/core/apis/users";
+import { useAppSelector } from "@/core/redux/hooks";
 
 export default function MyProfile() {
-  const [profile, setProfile] = useState({
-    name: "John Doe",
-    email: "john@example.com",
-    username: "johndoe",
-  })
+  const currentuser = useAppSelector((state) => state.user.userDetails);
+  const [profile, setProfile] = useState<any>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [countries, setCountries] = useState<{ value: string; label: string }[]>([]);
+  const [timezones, setTimezones] = useState<{ value: string; label: string }[]>([]);
 
-  const [isEditing, setIsEditing] = useState(false)
+  useEffect(() => {
+    const fetchUserData = async () => {
+      if (currentuser) {
+        const response = await users.getUserDetails(currentuser._id);
+        const userData = response.users[0]; 
+        setProfile({
+          firstName: userData.firstName,
+          lastName: userData.lastName,
+          email: userData.email,
+          jobTitle: userData.jobTitle,
+          country: userData.country,
+          timezone: userData.timezone,
+          bio: userData.description,
+          profilePicture: userData.profilePicture,
+        });
+      }
+    };
+    fetchUserData();
+  }, [currentuser]);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setProfile({ ...profile, [e.target.name]: e.target.value })
-  }
+  useEffect(() => {
+    setCountries(getCountries());
+    setTimezones(getTimezones());
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setProfile({ ...profile, [e.target.name]: e.target.value });
+  };
+
+  const handleSelectChange = (name: string) => (value: string) => {
+    setProfile({ ...profile, [name]: value });
+  };
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    // Here you would typically send the updated profile to your backend
-    console.log("Updated profile:", profile)
-    setIsEditing(false)
+    e.preventDefault();
+    console.log("Updated profile:", profile);
+    setIsEditing(false);
+  };
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setProfile({ ...profile, profilePicture: reader.result as string });
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  if (!profile) {
+    return <div>Loading...</div>;
   }
 
   return (
     <div className="space-y-6">
-      <h2 className="text-2xl font-bold">My Profile</h2>
-      <form onSubmit={handleSubmit} className="space-y-4">
+      <h2 className="text-2xl font-bold">Personal Information</h2>
+      <p className="text-sm text-gray-500">Update your photo and personal details.</p>
+
+      <form onSubmit={handleSubmit} className="space-y-8">
+        <div className="flex items-center space-x-4">
+          <Avatar className="w-24 h-24">
+            {profile?.profilePicture ? (
+              <AvatarImage
+                src={profile.profilePicture}
+                alt={`${profile.firstName} ${profile.lastName}`}
+              />
+            ) : (
+              <div className="bg-gray-200 w-full h-full flex items-center justify-center">
+                <span className="text-gray-500">No Image</span>
+              </div>
+            )}
+          </Avatar>
+          <div>
+            <Button type="button" variant="outline" className="mb-2">
+              <Label htmlFor="avatar-upload" className="cursor-pointer">
+                Update
+              </Label>
+            </Button>
+            <Input
+              id="avatar-upload"
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={handleImageUpload}
+              disabled={isEditing}
+            />
+            <Button type="button" variant="outline" className="text-red-500">
+              Delete
+            </Button>
+          </div>
+        </div>
+
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <div className="space-y-2">
-            <Label htmlFor="name">Name</Label>
-            <Input id="name" name="name" value={profile.name} onChange={handleInputChange} disabled={!isEditing} />
+            <Label htmlFor="firstName">First name</Label>
+            <Input
+              id="firstName"
+              name="firstName"
+              value={profile.firstName || ""}
+              onChange={handleInputChange}
+              disabled={isEditing}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="lastName">Last name</Label>
+            <Input
+              id="lastName"
+              name="lastName"
+              value={profile.lastName || ""}
+              onChange={handleInputChange}
+              disabled={isEditing}
+            />
           </div>
           <div className="space-y-2">
             <Label htmlFor="email">Email</Label>
@@ -40,31 +139,66 @@ export default function MyProfile() {
               id="email"
               name="email"
               type="email"
-              value={profile.email}
+              value={profile.email || ""}
               onChange={handleInputChange}
-              disabled={!isEditing}
+              disabled={isEditing}
             />
           </div>
           <div className="space-y-2">
-            <Label htmlFor="username">Username</Label>
+            <Label htmlFor="jobTitle">Job title</Label>
             <Input
-              id="username"
-              name="username"
-              value={profile.username}
+              id="jobTitle"
+              name="jobTitle"
+              value={profile.jobTitle || ""}
               onChange={handleInputChange}
-              disabled={!isEditing}
+              disabled={isEditing}
             />
           </div>
+          <div className="space-y-2">
+            <Label htmlFor="country">Country</Label>
+            <Select value={profile.country} onValueChange={handleSelectChange("country")} disabled={isEditing}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a country" />
+              </SelectTrigger>
+              <SelectContent>
+                {countries.map((country) => (
+                  <SelectItem key={country.value} value={country.value}>
+                    {country.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="timezone">Timezone</Label>
+            <Select value={profile.timezone} onValueChange={handleSelectChange("timezone")} disabled={isEditing}>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a timezone" />
+              </SelectTrigger>
+              <SelectContent>
+                {timezones.map((timezone) => (
+                  <SelectItem key={timezone.value} value={timezone.value}>
+                    {timezone.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="description">Bio</Label>
+          <Textarea
+            id="description"
+            name="description"
+            value={profile.bio || ""}
+            onChange={handleInputChange}
+            disabled={isEditing}
+            rows={4}
+          />
         </div>
-        {isEditing ? (
           <Button type="submit">Save Changes</Button>
-        ) : (
-          <Button type="button" onClick={() => setIsEditing(true)}>
-            Edit Profile
-          </Button>
-        )}
       </form>
     </div>
-  )
+  );
 }
-
diff --git a/netmanager-app/components/ui/textarea.tsx b/netmanager-app/components/ui/textarea.tsx
new file mode 100644
index 0000000000..4d858bb6b0
--- /dev/null
+++ b/netmanager-app/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/netmanager-app/package-lock.json b/netmanager-app/package-lock.json
index 70377ac0f0..6ce9ba94da 100644
--- a/netmanager-app/package-lock.json
+++ b/netmanager-app/package-lock.json
@@ -31,6 +31,7 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.0.4",
         "date-fns": "^3.6.0",
+        "i18n-iso-countries": "^7.13.0",
         "jwt-decode": "^4.0.0",
         "leaflet": "^1.9.4",
         "lucide-react": "^0.469.0",
@@ -48,6 +49,7 @@
         "sonner": "^1.7.1",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
+        "timezones.json": "^1.7.1",
         "zod": "^3.24.1"
       },
       "devDependencies": {
@@ -2688,6 +2690,11 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
+      "integrity": "sha512-wlwEkqcsaxvPJML+rDh/2iS824jbREk6DUMUKkEaSlxdYHeS43cClJtsWglvw2RfeXGm6ohKDqsXteJ5sP5enA=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3866,6 +3873,17 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/i18n-iso-countries": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-7.13.0.tgz",
+      "integrity": "sha512-pVh4CjdgAHZswI98hzG+1BItQlsQfR+yGDsjDISoWIV/jHDAvCmSyZ5vj2YWwAjfVZ8/BhBDqWcFvuGOyHe4vg==",
+      "dependencies": {
+        "diacritics": "1.3.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -6282,6 +6300,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/timezones.json": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/timezones.json/-/timezones.json-1.7.1.tgz",
+      "integrity": "sha512-4dB58ulcrRWfiGufzlofLG45RIoalCTZiFUc7tnj0g8za0CpNTyIOVlspg1JD7OFyDeW5up3ntlkukizwB0IJA=="
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
diff --git a/netmanager-app/package.json b/netmanager-app/package.json
index ac64760639..f076b39a24 100644
--- a/netmanager-app/package.json
+++ b/netmanager-app/package.json
@@ -32,6 +32,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "date-fns": "^3.6.0",
+    "i18n-iso-countries": "^7.13.0",
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.469.0",
@@ -49,6 +50,7 @@
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
+    "timezones.json": "^1.7.1",
     "zod": "^3.24.1"
   },
   "devDependencies": {
diff --git a/netmanager-app/utils/countries.ts b/netmanager-app/utils/countries.ts
new file mode 100644
index 0000000000..5ad740623d
--- /dev/null
+++ b/netmanager-app/utils/countries.ts
@@ -0,0 +1,13 @@
+import countries from "i18n-iso-countries"
+import enLocale from "i18n-iso-countries/langs/en.json"
+
+countries.registerLocale(enLocale)
+
+export const getCountries = () => {
+  const countryObj = countries.getNames("en", { select: "official" })
+  return Object.entries(countryObj).map(([code, name]) => ({
+    value: code,
+    label: name,
+  }))
+}
+
diff --git a/netmanager-app/utils/timezones.ts b/netmanager-app/utils/timezones.ts
new file mode 100644
index 0000000000..06f6a3b24c
--- /dev/null
+++ b/netmanager-app/utils/timezones.ts
@@ -0,0 +1,9 @@
+import timeZones from "timezones.json"
+
+export const getTimezones = () => {
+  return timeZones.map((tz) => ({
+    value: tz.utc[0],
+    label: `${tz.text} (${tz.utc[0]})`,
+  }))
+}
+

From 99c47c8c825934d6b07e4adf774db23b3ceabdb3 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Tue, 28 Jan 2025 21:48:34 +0300
Subject: [PATCH 03/32] Remove commented-out code from PasswordEdit component

---
 .../app/(authenticated)/profile/components/PasswordEdit.tsx    | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx b/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
index b17cbedfb7..e4a6c33b5c 100644
--- a/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
@@ -18,9 +18,6 @@ export default function PasswordEdit() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    // Here you would typically send the new password to your backend
-    console.log("Password change request:", passwords)
-    // Reset form after submission
     setPasswords({ current: "", new: "", confirm: "" })
   }
 

From 5bfa9b797f89bd8d20b48d02ea2cd80ea9c0f537 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Tue, 28 Jan 2025 21:54:27 +0300
Subject: [PATCH 04/32] commit

---
 .../app/(authenticated)/profile/components/MyProfile.tsx         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
index 9404d27be8..52cc7f1176 100644
--- a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
@@ -54,7 +54,6 @@ export default function MyProfile() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Updated profile:", profile);
     setIsEditing(false);
   };
 

From dabe3f06226b2d0bfa25d277522a6a6147eea037 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Tue, 28 Jan 2025 22:52:10 +0300
Subject: [PATCH 05/32] commit

---
 netmanager-app/core/apis/settings.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 netmanager-app/core/apis/settings.ts

diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
new file mode 100644
index 0000000000..c48373bcba
--- /dev/null
+++ b/netmanager-app/core/apis/settings.ts
@@ -0,0 +1,17 @@
+import createAxiosInstance from "./axiosConfig";
+import { USERS_MGT_URL} from "@/core/urls";
+import { Client } from "@/app/types/clients";
+
+const axiosInstance = createAxiosInstance();
+
+export const getClientsApi = async (userID: string): Promise<Client[]> => {
+    try {
+      const response = await axiosInstance.get<Client[]>(USERS_MGT_URL, {
+        params: { user_id: userID },
+      });
+      return response.data;
+    } catch (error) {
+      console.error("Error fetching clients:", error);
+      throw error;
+    }
+};
\ No newline at end of file

From 59927330a6b01a43e9bf68933c52593e60673c33 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Tue, 28 Jan 2025 22:55:16 +0300
Subject: [PATCH 06/32] commit

---
 netmanager-app/app/types/clients.ts | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 netmanager-app/app/types/clients.ts

diff --git a/netmanager-app/app/types/clients.ts b/netmanager-app/app/types/clients.ts
new file mode 100644
index 0000000000..9e0235a51c
--- /dev/null
+++ b/netmanager-app/app/types/clients.ts
@@ -0,0 +1,27 @@
+import { UserDetails } from './users';
+  
+  export interface AccessToken {
+    _id: string
+    permissions: string[]
+    scopes: string[]
+    expiredEmailSent: boolean
+    token: string
+    client_id: string
+    name: string
+    expires: string
+    createdAt: string
+    updatedAt: string
+    __v: number
+  }
+  
+  export interface Client {
+    _id: string
+    isActive: boolean
+    ip_addresses: string[]
+    name: string
+    client_secret: string
+    user: UserDetails
+    access_token: AccessToken
+  }
+  
+  
\ No newline at end of file

From 36741ae76a4bb5db29e859efa7ccf47877044e84 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Tue, 28 Jan 2025 23:27:15 +0300
Subject: [PATCH 07/32] Refactor ApiTokens component to fetch user clients and
 display them in a table

---
 .../profile/components/ApiTokens.tsx          | 114 +++++++++---------
 netmanager-app/core/apis/settings.ts          |   2 +-
 2 files changed, 61 insertions(+), 55 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
index 799618cf08..bd3f296f06 100644
--- a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
@@ -1,59 +1,42 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-
-interface Token {
-  id: string
-  name: string
-  ipAddress: string
-  status: "Active" | "Inactive"
-  created: string
-  token: string
-  expires: string
-}
+import { Skeleton } from "@/components/ui/skeleton"
+import type { Client } from "@/app/types/clients"
+import { getUserClientsApi } from "@/core/apis/settings"
+import { useAppSelector } from "@/core/redux/hooks"
 
 export default function ApiTokens() {
-  const [tokens, setTokens] = useState<Token[]>([
-    {
-      id: "1",
-      name: "Production API",
-      ipAddress: "192.168.1.1",
-      status: "Active",
-      created: "2023-01-01",
-      token: "abc123xyz789",
-      expires: "2024-01-01",
-    },
-    {
-      id: "2",
-      name: "Development API",
-      ipAddress: "192.168.1.2",
-      status: "Active",
-      created: "2023-02-01",
-      token: "def456uvw890",
-      expires: "2024-02-01",
-    },
-  ])
-
+  const [clients, setClients] = useState<Client[]>([])
   const [newTokenName, setNewTokenName] = useState("")
+  const [isLoading, setIsLoading] = useState(true)
+  const currentuser = useAppSelector((state) => state.user.userDetails)
+
+  useEffect(() => {
+    const fetchClients = async () => {
+      try {
+        setIsLoading(true)
+        const userID = currentuser?._id || ""
+        const response = await getUserClientsApi(userID)
+        setClients(response)
+      } catch (error) {
+        console.error("Failed to fetch clients:", error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchClients()
+  }, [currentuser?._id])
 
   const handleCreateToken = (e: React.FormEvent) => {
     e.preventDefault()
-    // Here you would typically send a request to your backend to create a new token
-    const newToken: Token = {
-      id: String(tokens.length + 1),
-      name: newTokenName,
-      ipAddress: "192.168.1." + (tokens.length + 1),
-      status: "Active",
-      created: new Date().toISOString().split("T")[0],
-      token: Math.random().toString(36).substring(2, 15),
-      expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split("T")[0],
-    }
-    setTokens([...tokens, newToken])
-    setNewTokenName("")
+    // Handle token creation logic here if needed
+    console.log("Create token feature is not implemented yet.")
   }
 
   return (
@@ -83,7 +66,7 @@ export default function ApiTokens() {
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Client name</TableHead>
+            <TableHead>Client Name</TableHead>
             <TableHead>IP Address</TableHead>
             <TableHead>Client Status</TableHead>
             <TableHead>Created</TableHead>
@@ -92,16 +75,39 @@ export default function ApiTokens() {
           </TableRow>
         </TableHeader>
         <TableBody>
-          {tokens.map((token) => (
-            <TableRow key={token.id}>
-              <TableCell>{token.name}</TableCell>
-              <TableCell>{token.ipAddress}</TableCell>
-              <TableCell>{token.status}</TableCell>
-              <TableCell>{token.created}</TableCell>
-              <TableCell>{token.token}</TableCell>
-              <TableCell>{token.expires}</TableCell>
+          {isLoading ? (
+            // Loading skeleton
+            Array.from({ length: 3 }).map((_, index) => (
+              <TableRow key={index}>
+                {Array.from({ length: 6 }).map((_, cellIndex) => (
+                  <TableCell key={cellIndex}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : clients.length > 0 ? (
+            clients.map((client) => (
+              <TableRow key={client._id}>
+                <TableCell>{client.name}</TableCell>
+                <TableCell>{client.ip_addresses.length > 0 ? client.ip_addresses[0] : "N/A"}</TableCell>
+                <TableCell>{client.isActive ? "Active" : "Inactive"}</TableCell>
+                <TableCell>{new Date(client.access_token.createdAt).toLocaleDateString()}</TableCell>
+                <TableCell>{client.access_token.token}</TableCell>
+                <TableCell>
+                  {client.access_token.expires
+                    ? new Date(client.access_token.expires).toLocaleDateString()
+                    : "No Expiration"}
+                </TableCell>
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={6} className="text-center">
+                No clients found.
+              </TableCell>
             </TableRow>
-          ))}
+          )}
         </TableBody>
       </Table>
     </div>
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index c48373bcba..302610fdd4 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -4,7 +4,7 @@ import { Client } from "@/app/types/clients";
 
 const axiosInstance = createAxiosInstance();
 
-export const getClientsApi = async (userID: string): Promise<Client[]> => {
+export const getUserClientsApi = async (userID: string): Promise<Client[]> => {
     try {
       const response = await axiosInstance.get<Client[]>(USERS_MGT_URL, {
         params: { user_id: userID },

From 4dac54e7116ec4d588b92ad93acb3e1896c2c1d5 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 29 Jan 2025 01:02:27 +0300
Subject: [PATCH 08/32] Implement client token creation and enhance client
 fetching in ApiTokens component

---
 .../profile/components/ApiTokens.tsx          | 53 +++++++++--
 .../profile/components/ClientTableRow.tsx     | 93 +++++++++++++++++++
 netmanager-app/core/apis/settings.ts          | 16 +++-
 netmanager-app/package-lock.json              |  9 ++
 netmanager-app/package.json                   |  1 +
 5 files changed, 164 insertions(+), 8 deletions(-)
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/ClientTableRow.tsx

diff --git a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
index bd3f296f06..4fdc5864e6 100644
--- a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
@@ -7,22 +7,26 @@ import { Label } from "@/components/ui/label"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Skeleton } from "@/components/ui/skeleton"
 import type { Client } from "@/app/types/clients"
-import { getUserClientsApi } from "@/core/apis/settings"
+import { createClientApi, getUserClientsApi } from "@/core/apis/settings"
 import { useAppSelector } from "@/core/redux/hooks"
 
 export default function ApiTokens() {
   const [clients, setClients] = useState<Client[]>([])
   const [newTokenName, setNewTokenName] = useState("")
   const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState("")
+  const [isCreating, setIsCreating] = useState(false)
   const currentuser = useAppSelector((state) => state.user.userDetails)
 
+  // Fetch clients on component mount or when currentuser changes
   useEffect(() => {
     const fetchClients = async () => {
       try {
         setIsLoading(true)
         const userID = currentuser?._id || ""
         const response = await getUserClientsApi(userID)
-        setClients(response)
+
+        setClients(response.clients)
       } catch (error) {
         console.error("Failed to fetch clients:", error)
       } finally {
@@ -33,10 +37,43 @@ export default function ApiTokens() {
     fetchClients()
   }, [currentuser?._id])
 
-  const handleCreateToken = (e: React.FormEvent) => {
+  const handleCreateToken = async (e: React.FormEvent) => {
     e.preventDefault()
-    // Handle token creation logic here if needed
-    console.log("Create token feature is not implemented yet.")
+
+    if (!newTokenName.trim()) {
+      setError("Token name is required.")
+      return
+    }
+
+    setError("")
+    setIsCreating(true)
+    try {
+      const userID = currentuser?._id || ""
+      if (!userID) {
+        setError("User is not authenticated.")
+        setIsCreating(false)
+        return
+      }
+
+      const data = {
+        name: newTokenName,
+        user_id: userID,
+      }
+      const response = await createClientApi(data)
+
+      if (response) {
+        const updatedClients = await getUserClientsApi(userID)
+        setClients(updatedClients)
+
+        setNewTokenName("")
+      } else {
+        setError( "Failed to create token.")
+      }
+    } catch (err: any) {
+      setError(err.response?.data?.message || "An error occurred while creating the token.")
+    } finally {
+      setIsCreating(false)
+    }
   }
 
   return (
@@ -60,8 +97,11 @@ export default function ApiTokens() {
               required
             />
           </div>
-          <Button type="submit">Create New Token</Button>
+          <Button type="submit" disabled={isCreating}>
+            {isCreating ? "Creating..." : "Create New Token"}
+          </Button>
         </div>
+        {error && <p className="text-red-500 text-sm">{error}</p>}
       </form>
       <Table>
         <TableHeader>
@@ -113,4 +153,3 @@ export default function ApiTokens() {
     </div>
   )
 }
-
diff --git a/netmanager-app/app/(authenticated)/profile/components/ClientTableRow.tsx b/netmanager-app/app/(authenticated)/profile/components/ClientTableRow.tsx
new file mode 100644
index 0000000000..611dd798ff
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/ClientTableRow.tsx
@@ -0,0 +1,93 @@
+import type { FC } from "react"
+import moment from "moment"
+import {Button} from "@/components/ui/button"
+import CopyIcon from "@/icons/Common/copy.svg"
+import EditIcon from "@/icons/Common/edit-pencil.svg"
+
+interface ClientTableRowProps {
+  client: any
+  onGenerateToken: (client: any) => void
+  onEditClient: (client: any) => void
+  onCopyToken: (token: string) => void
+  getClientToken: (clientId: string) => string | null
+  getClientTokenExpiryDate: (clientId: string) => string | null
+  isLoadingToken: boolean
+}
+
+export const ClientTableRow: FC<ClientTableRowProps> = ({
+  client,
+  onGenerateToken,
+  onEditClient,
+  onCopyToken,
+  getClientToken,
+  getClientTokenExpiryDate,
+  isLoadingToken,
+}) => {
+  const displayIPAddresses = (client) => {
+    return Array.isArray(client.ip_addresses) ? client.ip_addresses.join(", ") : client.ip_addresses
+  }
+
+  return (
+    <tr className="border-b border-b-secondary-neutral-light-100">
+      <td className="w-[200px] px-4 py-3 font-medium text-sm leading-5 text-secondary-neutral-light-800 uppercase">
+        {client?.name}
+      </td>
+      <td className="w-[138px] px-4 py-3 font-medium text-sm leading-5 text-secondary-neutral-light-400">
+        {displayIPAddresses(client)}
+      </td>
+      <td className="w-[142px] px-4 py-3">
+        <div
+          className={`px-2 py-[2px] rounded-2xl w-auto inline-flex justify-center text-sm leading-5 items-center mx-auto ${
+            client?.isActive
+              ? "bg-success-50 text-success-700"
+              : "bg-secondary-neutral-light-50 text-secondary-neutral-light-500"
+          }`}
+        >
+          {client?.isActive ? "Activated" : "Not Activated"}
+        </div>
+      </td>
+      <td className="w-[138px] px-4 py-3 font-medium text-sm leading-5 text-secondary-neutral-light-400">
+        {moment(client?.createdAt).format("MMM DD, YYYY")}
+      </td>
+      <td className="w-[138px] px-4 py-3">
+        {getClientToken(client._id) ? (
+          <span className="font-medium text-sm leading-5 text-secondary-neutral-light-400 flex items-center gap-2">
+            {getClientToken(client._id).slice(0, 2)}....
+            {getClientToken(client._id).slice(-2)}
+            <div
+              className="w-6 h-6 bg-white rounded border border-gray-200 flex justify-center items-center gap-2 cursor-pointer"
+              onClick={() => onCopyToken(getClientToken(client._id))}
+            >
+              <CopyIcon />
+            </div>
+          </span>
+        ) : (
+          <Button
+            title={!client?.isActive ? "Tap to generate token" : "Token already generated"}
+            className={`px-4 py-2 rounded-2xl w-auto inline-flex justify-center text-sm leading-5 items-center mx-auto ${
+              !getClientToken(client._id)
+                ? "bg-success-700 text-success-50 cursor-pointer"
+                : "bg-secondary-neutral-light-50 text-secondary-neutral-light-500"
+            }`}
+            disabled={isLoadingToken}
+            onClick={() => onGenerateToken(client)}
+          >
+            Generate
+          </Button>
+        )}
+      </td>
+      <td className="w-[138px] px-4 py-3 font-medium text-sm leading-5 text-secondary-neutral-light-400">
+        {getClientTokenExpiryDate(client._id) && moment(getClientTokenExpiryDate(client._id)).format("MMM DD, YYYY")}
+      </td>
+      <td className="w-24 px-4 py-3 font-medium text-sm leading-5 text-secondary-neutral-light-400 capitalize">
+        <div
+          className="w-9 h-9 p-2.5 bg-white rounded border border-gray-200 justify-center items-center gap-2 cursor-pointer"
+          onClick={() => onEditClient(client)}
+        >
+          <EditIcon className="w-4 h-4" />
+        </div>
+      </td>
+    </tr>
+  )
+}
+
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index 302610fdd4..80efc3ac2b 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -1,12 +1,21 @@
 import createAxiosInstance from "./axiosConfig";
+import { AxiosResponse } from "axios";
 import { USERS_MGT_URL} from "@/core/urls";
 import { Client } from "@/app/types/clients";
 
+interface CreateClientData {
+  name: string;
+  ip_addresses: string[];
+  isActive: boolean;
+  client_secret: string;
+  user_id: string;
+}
+
 const axiosInstance = createAxiosInstance();
 
 export const getUserClientsApi = async (userID: string): Promise<Client[]> => {
     try {
-      const response = await axiosInstance.get<Client[]>(USERS_MGT_URL, {
+      const response = await axiosInstance.get<Client[]>(`${USERS_MGT_URL}/clients`, {
         params: { user_id: userID },
       });
       return response.data;
@@ -14,4 +23,9 @@ export const getUserClientsApi = async (userID: string): Promise<Client[]> => {
       console.error("Error fetching clients:", error);
       throw error;
     }
+};
+
+export const createClientApi = async (data: CreateClientData): Promise<Client> => {
+  return await axiosInstance.post<CreateClientData, AxiosResponse<Client>>(`${USERS_MGT_URL}/clients`, data)
+    .then((response) => response.data);
 };
\ No newline at end of file
diff --git a/netmanager-app/package-lock.json b/netmanager-app/package-lock.json
index 6ce9ba94da..eecdb88570 100644
--- a/netmanager-app/package-lock.json
+++ b/netmanager-app/package-lock.json
@@ -35,6 +35,7 @@
         "jwt-decode": "^4.0.0",
         "leaflet": "^1.9.4",
         "lucide-react": "^0.469.0",
+        "moment": "^2.30.1",
         "next": "14.2.16",
         "next-themes": "^0.4.4",
         "react": "^18",
@@ -4657,6 +4658,14 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/netmanager-app/package.json b/netmanager-app/package.json
index f076b39a24..712bc57959 100644
--- a/netmanager-app/package.json
+++ b/netmanager-app/package.json
@@ -36,6 +36,7 @@
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.469.0",
+    "moment": "^2.30.1",
     "next": "14.2.16",
     "next-themes": "^0.4.4",
     "react": "^18",

From 3c4ea580b73d87db01f52e6568b69c6bfde033e0 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 29 Jan 2025 12:59:32 +0300
Subject: [PATCH 09/32] commit

---
 .../profile/components/ApiTokens.tsx          | 351 ++++++++++++------
 .../profile/components/DialogWrapper.tsx      |  54 +++
 .../profile/components/EditClientForm.tsx     | 185 +++++++++
 netmanager-app/core/apis/settings.ts          |  43 ++-
 4 files changed, 519 insertions(+), 114 deletions(-)
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/DialogWrapper.tsx
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx

diff --git a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
index 4fdc5864e6..8cf8840d02 100644
--- a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
@@ -1,155 +1,282 @@
-"use client"
-
-import { useState, useEffect } from "react"
+import type React from "react"
+import { useEffect, useState } from "react"
+import moment from "moment"
+import { useAppDispatch, useAppSelector } from "@/core/redux/hooks"
+import { Toast } from "@/components/ui/toast"
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import {  performRefresh } from "@/lib/store/services/apiClient"
+import EditClientForm from "./EditClientForm"
+import DialogWrapper from "./DialogWrapper"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Skeleton } from "@/components/ui/skeleton"
-import type { Client } from "@/app/types/clients"
-import { createClientApi, getUserClientsApi } from "@/core/apis/settings"
-import { useAppSelector } from "@/core/redux/hooks"
+import { Edit, Copy, Info } from "lucide-react"
+import { api } from "../utils/api"tore"
+
+const UserClientsTable: React.FC = () => {
+  const dispatch = useAppDispatch()
+  const [isError, setIsError] = useState({ isError: false, message: "", type: "" })
+  const [isActivationRequestError, setIsActivationRequestError] = useState({ isError: false, message: "", type: "" })
+  const [showInfoModal, setShowInfoModal] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [isLoadingToken, setIsLoadingToken] = useState(false)
+  const [isLoadingActivationRequest, setIsLoadingActivationRequest] = useState(false)
+  const [openEditForm, setOpenEditForm] = useState(false)
+  const [selectedClient, setSelectedClient] = useState(null)
+  const userInfo = useAppSelector((state) => state.user.userDetails)
+  const clients = useAppSelector((state) => state.sites.clients)
+  const clientsDetails = useAppSelector((state) => state.sites.clientsDetails)
+  const [currentPage, setCurrentPage] = useState(1)
+  const itemsPerPage = 4
 
-export default function ApiTokens() {
-  const [clients, setClients] = useState<Client[]>([])
-  const [newTokenName, setNewTokenName] = useState("")
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState("")
-  const [isCreating, setIsCreating] = useState(false)
-  const currentuser = useAppSelector((state) => state.user.userDetails)
+  const onPageChange = (newPage: number) => {
+    setCurrentPage(newPage)
+  }
+
+  const setErrorState = (message: string, type: string) => {
+    setIsError({
+      isError: true,
+      message,
+      type,
+    })
+  }
 
-  // Fetch clients on component mount or when currentuser changes
   useEffect(() => {
-    const fetchClients = async () => {
+    const fetchData = async () => {
+      setIsLoading(true)
       try {
-        setIsLoading(true)
-        const userID = currentuser?._id || ""
-        const response = await getUserClientsApi(userID)
-
-        setClients(response.clients)
+        const res = await api.getUserDetailsAccount(userInfo?._id)
+        if (res.success === true) {
+          dispatch({ type: "ADD_CLIENTS", payload: res.users[0].clients })
+          setCurrentPage(1)
+        }
       } catch (error) {
-        console.error("Failed to fetch clients:", error)
+        console.error(error)
       } finally {
         setIsLoading(false)
       }
     }
+    fetchData()
+  }, [userInfo?._id, dispatch])
 
-    fetchClients()
-  }, [currentuser?._id])
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true)
+      try {
+        const response = await api.getClients(userInfo?._id)
+        if (response.success === true) {
+          dispatch({ type: "ADD_CLIENTS_DETAILS", payload: response.clients })
+        }
+      } catch (error) {
+        console.error(error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchData()
+  }, [userInfo?._id, dispatch])
 
-  const handleCreateToken = async (e: React.FormEvent) => {
-    e.preventDefault()
+  const hasAccessToken = (clientId: string) => {
+    const client =
+      Array.isArray(clientsDetails) && (clientsDetails)
+        ? clientsDetails?.find((client: any) => client._id === clientId)
+        : undefined
+    return client && client.access_token
+  }
 
-    if (!newTokenName.trim()) {
-      setError("Token name is required.")
-      return
-    }
+  const getClientToken = (clientID: string) => {
+    const client =
+      Array.isArray(clientsDetails) && (clientsDetails)
+        ? clientsDetails?.find((client: any) => client._id === clientID)
+        : undefined
+    return client && client.access_token && client.access_token.token
+  }
 
-    setError("")
-    setIsCreating(true)
-    try {
-      const userID = currentuser?._id || ""
-      if (!userID) {
-        setError("User is not authenticated.")
-        setIsCreating(false)
-        return
-      }
+  const getClientTokenExpiryDate = (clientID: string) => {
+    const client =
+      Array.isArray(clientsDetails) && (clientsDetails)
+        ? clientsDetails?.find((client: any) => client._id === clientID)
+        : undefined
+    return client && client.access_token && client.access_token.expires
+  }
 
-      const data = {
-        name: newTokenName,
-        user_id: userID,
+  const handleGenerateToken = async (res: any) => {
+    setIsLoadingToken(true)
+    if (!res?.isActive) {
+      setShowInfoModal(true)
+      setIsLoadingToken(false)
+    } else {
+      try {
+        const response = await api.generateToken(res)
+        if (response.success === true) {
+          setErrorState("Token generated", "success")
+        }
+        dispatch(performRefresh())
+      } catch (error: any) {
+        setErrorState(error.message, "error")
+      } finally {
+        setIsLoadingToken(false)
       }
-      const response = await createClientApi(data)
-
-      if (response) {
-        const updatedClients = await getUserClientsApi(userID)
-        setClients(updatedClients)
+    }
+  }
 
-        setNewTokenName("")
-      } else {
-        setError( "Failed to create token.")
+  const handleActivationRequest = async () => {
+    const setActivationRequestErrorState = (message: string, type: string) => {
+      setIsActivationRequestError({
+        isError: true,
+        message,
+        type,
+      })
+    }
+    setIsLoadingActivationRequest(true)
+    try {
+      const clientID = selectedClient?._id
+      const response = await api.activationRequest(clientID)
+      if (response.success === true) {
+        setShowInfoModal(false)
+        setTimeout(() => {
+          setActivationRequestErrorState("Activation request sent successfully", "success")
+        }, 3000)
       }
-    } catch (err: any) {
-      setError(err.response?.data?.message || "An error occurred while creating the token.")
+    } catch (error: any) {
+      setShowInfoModal(false)
+      setTimeout(() => {
+        setActivationRequestErrorState(error.message, "error")
+      }, 3000)
     } finally {
-      setIsCreating(false)
+      setIsLoadingActivationRequest(false)
     }
   }
 
+  const displayIPAddresses = (client: any) => {
+    return Array.isArray(client.ip_addresses) ? client.ip_addresses.join(", ") : client.ip_addresses
+  }
+
   return (
-    <div className="space-y-6">
-      <h2 className="text-2xl font-bold">API Access Tokens</h2>
-      <p className="text-sm text-gray-500">
-        Clients are used to generate API tokens that can be used to authenticate with the API. Your secret API tokens
-        are listed below. Remember to keep them secure and never share them.
-      </p>
-      <form onSubmit={handleCreateToken} className="space-y-4">
-        <div className="flex space-x-2">
-          <div className="flex-grow">
-            <Label htmlFor="new-token-name" className="sr-only">
-              New Token Name
-            </Label>
-            <Input
-              id="new-token-name"
-              placeholder="Enter new token name"
-              value={newTokenName}
-              onChange={(e) => setNewTokenName(e.target.value)}
-              required
-            />
-          </div>
-          <Button type="submit" disabled={isCreating}>
-            {isCreating ? "Creating..." : "Create New Token"}
-          </Button>
-        </div>
-        {error && <p className="text-red-500 text-sm">{error}</p>}
-      </form>
+    <div className="overflow-x-auto">
+      {isError.isError && <Toast type={isError.type} message={isError.message} />}
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Client Name</TableHead>
-            <TableHead>IP Address</TableHead>
-            <TableHead>Client Status</TableHead>
-            <TableHead>Created</TableHead>
-            <TableHead>Token</TableHead>
-            <TableHead>Expires</TableHead>
+            <TableHead className="w-[200px]">Client name</TableHead>
+            <TableHead className="w-[138px]">IP Address</TableHead>
+            <TableHead className="w-[142px]">Client Status</TableHead>
+            <TableHead className="w-[138px]">Created</TableHead>
+            <TableHead className="w-[138px]">Token</TableHead>
+            <TableHead className="w-[138px]">Expires</TableHead>
+            <TableHead className="w-24"></TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {isLoading ? (
-            // Loading skeleton
-            Array.from({ length: 3 }).map((_, index) => (
-              <TableRow key={index}>
-                {Array.from({ length: 6 }).map((_, cellIndex) => (
-                  <TableCell key={cellIndex}>
-                    <Skeleton className="h-6 w-full" />
+            <TableRow>
+              <TableCell colSpan={7}>
+                <Skeleton className="w-full h-12" />
+              </TableCell>
+            </TableRow>
+          ) : clients?.length > 0 ? (
+            clients
+              .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+              .map((client: any, index: number) => (
+                <TableRow key={index}>
+                  <TableCell className="font-medium">{client?.name}</TableCell>
+                  <TableCell>{displayIPAddresses(client)}</TableCell>
+                  <TableCell>
+                    <span
+                      className={`px-2 py-1 rounded-full text-xs ${
+                        client?.isActive ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                      }`}
+                    >
+                      {client?.isActive ? "Activated" : "Not Activated"}
+                    </span>
+                  </TableCell>
+                  <TableCell>{moment(client?.createdAt).format("MMM DD, YYYY")}</TableCell>
+                  <TableCell>
+                    {getClientToken(client._id) ? (
+                      <div className="flex items-center">
+                        <span className="mr-2">
+                          {getClientToken(client._id).slice(0, 2)}....
+                          {getClientToken(client._id).slice(-2)}
+                        </span>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => {
+                            navigator.clipboard.writeText(getClientToken(client._id))
+                            setErrorState("Token copied to clipboard!", "success")
+                          }}
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ) : (
+                      <Button
+                        variant={!hasAccessToken(client._id) ? "default" : "secondary"}
+                        size="sm"
+                        disabled={isLoadingToken}
+                        onClick={() => {
+                          const res = {
+                            name: client.name,
+                            client_id: client._id,
+                            isActive: client.isActive ? client.isActive : false,
+                          }
+                          setSelectedClient(client)
+                          handleGenerateToken(res)
+                        }}
+                      >
+                        Generate
+                      </Button>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    {getClientTokenExpiryDate(client._id) &&
+                      moment(getClientTokenExpiryDate(client._id)).format("MMM DD, YYYY")}
                   </TableCell>
-                ))}
-              </TableRow>
-            ))
-          ) : clients.length > 0 ? (
-            clients.map((client) => (
-              <TableRow key={client._id}>
-                <TableCell>{client.name}</TableCell>
-                <TableCell>{client.ip_addresses.length > 0 ? client.ip_addresses[0] : "N/A"}</TableCell>
-                <TableCell>{client.isActive ? "Active" : "Inactive"}</TableCell>
-                <TableCell>{new Date(client.access_token.createdAt).toLocaleDateString()}</TableCell>
-                <TableCell>{client.access_token.token}</TableCell>
-                <TableCell>
-                  {client.access_token.expires
-                    ? new Date(client.access_token.expires).toLocaleDateString()
-                    : "No Expiration"}
-                </TableCell>
-              </TableRow>
-            ))
+                  <TableCell>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setOpenEditForm(true)
+                        setSelectedClient(client)
+                      }}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))
           ) : (
             <TableRow>
-              <TableCell colSpan={6} className="text-center">
-                No clients found.
+              <TableCell colSpan={7} className="text-center">
+                No data found
               </TableCell>
             </TableRow>
           )}
         </TableBody>
       </Table>
+      {/* Add your Pagination component here */}
+      {isActivationRequestError.isError && (
+        <Toast type={isActivationRequestError.type} message={isActivationRequestError.message} />
+      )}
+      <EditClientForm open={openEditForm} closeModal={() => setOpenEditForm(false)} data={selectedClient} />
+      <DialogWrapper
+        open={showInfoModal}
+        onClose={() => setShowInfoModal(false)}
+        handleClick={handleActivationRequest}
+        primaryButtonText={"Send activation request"}
+        loading={isLoadingActivationRequest}
+      >
+        <div className="flex items-center">
+          <Info className="h-5 w-5 mr-2 text-blue-500" />
+          <p className="text-sm text-gray-600">
+            You cannot generate a token for an inactive client. Reach out to support for assistance at support@airqo.net
+            or send an activation request.
+          </p>
+        </div>
+      </DialogWrapper>
     </div>
   )
 }
+
+export default UserClientsTable
+
diff --git a/netmanager-app/app/(authenticated)/profile/components/DialogWrapper.tsx b/netmanager-app/app/(authenticated)/profile/components/DialogWrapper.tsx
new file mode 100644
index 0000000000..5a020d8c20
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/DialogWrapper.tsx
@@ -0,0 +1,54 @@
+import type React from "react"
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+
+interface DialogWrapperProps {
+  children: React.ReactNode
+  ModalIcon?: React.ComponentType<{ className?: string }>
+  handleClick: () => void
+  open: boolean
+  onClose: () => void
+  primaryButtonText?: string
+  loading?: boolean
+  title?: string
+}
+
+export const DialogWrapper: React.FC<DialogWrapperProps> = ({
+  children,
+  ModalIcon,
+  handleClick,
+  open,
+  onClose,
+  primaryButtonText = "Submit",
+  loading = false,
+  title,
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[400px]">
+        <DialogHeader>
+          {ModalIcon && (
+            <div className="flex justify-center items-center mb-4">
+              <div className="p-5 bg-indigo-50 rounded-full border-indigo-50">
+                <ModalIcon className="w-6 h-6" />
+              </div>
+            </div>
+          )}
+          {title && <DialogTitle>{title}</DialogTitle>}
+        </DialogHeader>
+        <div className="py-4">{children}</div>
+        <DialogFooter className="sm:justify-start">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleClick} disabled={loading}>
+            {loading ? "Loading..." : primaryButtonText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default DialogWrapper
+
diff --git a/netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx b/netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx
new file mode 100644
index 0000000000..cf1fa0d508
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx
@@ -0,0 +1,185 @@
+import React, { useState, useEffect, useCallback } from "react"
+import { useSelector, useDispatch } from "react-redux"
+import DialogWrapper from "@/components/Modal/DialogWrapper"
+import Toast from "@/components/Toast"
+import { addClients, addClientsDetails, performRefresh } from "@/lib/store/services/apiClient"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { X, Plus } from "lucide-react"
+import { api } from "../utils/api"
+import type { RootState } from "@/lib/store"
+
+interface EditClientFormProps {
+  open: boolean
+  closeModal: () => void
+  data: any
+}
+
+const EditClientForm: React.FC<EditClientFormProps> = ({ open, closeModal, data }) => {
+  const dispatch = useDispatch()
+  const userInfo = useSelector((state: RootState) => state.user.userInfo)
+  const clientID = data?._id
+  const [loading, setLoading] = useState(false)
+  const [isError, setIsError] = useState({ isError: false, message: "", type: "" })
+  const [clientName, setClientName] = useState("")
+  const [ipAddresses, setIpAddresses] = useState([""])
+
+  useEffect(() => {
+    handleInitialData()
+  }, [handleInitialData]) // Updated dependency
+
+  const handleInitialData = () => {
+    setClientName(data?.name || "")
+    const ipAddresses = Array.isArray(data?.ip_addresses)
+      ? data?.ip_addresses
+      : data?.ip_addresses
+        ? [data?.ip_addresses]
+        : [""]
+    setIpAddresses(ipAddresses)
+  }
+
+  const handleInputValueChange = useCallback((type: string, value: string, index?: number) => {
+    if (type === "clientName") {
+      setClientName(value)
+    } else if (type === "ipAddress" && index !== undefined) {
+      setIpAddresses((prev) => {
+        const newIpAddresses = [...prev]
+        newIpAddresses[index] = value
+        return newIpAddresses
+      })
+    }
+  }, [])
+
+  const handleRemoveInputValue = useCallback((type: string, index?: number) => {
+    if (type === "clientName") {
+      setClientName("")
+    } else if (type === "ipAddress" && index !== undefined) {
+      setIpAddresses((prev) => prev.filter((_, i) => i !== index))
+    }
+  }, [])
+
+  const handleAddIpAddress = useCallback(() => {
+    setIpAddresses((prev) => [...prev, ""])
+  }, [])
+
+  const handleSubmit = async () => {
+    setLoading(true)
+
+    if (!clientName) {
+      setIsError({
+        isError: true,
+        message: "Client name can't be empty",
+        type: "error",
+      })
+      setLoading(false)
+      return
+    }
+
+    try {
+      const data = {
+        name: clientName,
+        user_id: userInfo?._id,
+        ip_addresses: ipAddresses.filter((ip) => ip.trim() !== ""),
+      }
+
+      const response = await api.updateClient(data, clientID)
+      if (response.success !== true) {
+        throw new Error("Failed to update client")
+      }
+      const res = await api.getUserDetailsAccount(userInfo?._id)
+      const resp = await api.getClients(userInfo?._id)
+      dispatch(addClients(res.users[0].clients))
+      dispatch(addClientsDetails(resp.clients))
+      dispatch(performRefresh())
+      closeModal()
+    } catch (error: any) {
+      setIsError({
+        isError: true,
+        message: error?.response?.data?.message || "Failed to Edit client",
+        type: "error",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (isError.isError) {
+      const timer = setTimeout(() => {
+        setIsError({
+          isError: false,
+          message: "",
+          type: "",
+        })
+      }, 2000)
+
+      return () => clearTimeout(timer)
+    }
+  }, [isError.isError])
+
+  return (
+    <DialogWrapper
+      open={open}
+      onClose={closeModal}
+      handleClick={handleSubmit}
+      primaryButtonText="Update"
+      loading={loading}
+    >
+      {isError.isError && <Toast type={isError.type} message={isError.message} />}
+      <h3 className="text-lg font-medium text-secondary-neutral-light-800 leading-[26px] mb-2">Edit client</h3>
+
+      <div className="flex flex-col gap-3 justify-start max-h-[350px] overflow-y-auto">
+        <div className="relative">
+          <Label htmlFor="clientName">Client Name</Label>
+          <Input
+            id="clientName"
+            type="text"
+            placeholder="Enter client name"
+            value={clientName}
+            onChange={(e) => handleInputValueChange("clientName", e.target.value)}
+          />
+          {clientName && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 transform -translate-y-1/2"
+              onClick={() => handleRemoveInputValue("clientName")}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+
+        {ipAddresses.map((ip, index) => (
+          <div key={index} className="relative">
+            <Label htmlFor={`ipAddress${index}`}>IP Address {index + 1}</Label>
+            <Input
+              id={`ipAddress${index}`}
+              type="text"
+              placeholder={`Enter IP address ${index + 1}`}
+              value={ip}
+              onChange={(e) => handleInputValueChange("ipAddress", e.target.value, index)}
+            />
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 transform -translate-y-1/2"
+              onClick={() => handleRemoveInputValue("ipAddress", index)}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        ))}
+
+        <Button variant="outline" onClick={handleAddIpAddress} className="flex items-center justify-start text-sm">
+          <Plus className="mr-2 h-4 w-4" />
+          Add another IP address
+        </Button>
+      </div>
+    </DialogWrapper>
+  )
+}
+
+export default React.memo(EditClientForm)
+
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index 80efc3ac2b..93bb0f4681 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -1,7 +1,8 @@
 import createAxiosInstance from "./axiosConfig";
 import { AxiosResponse } from "axios";
 import { USERS_MGT_URL} from "@/core/urls";
-import { Client } from "@/app/types/clients";
+import { Client, AccessToken } from "@/app/types/clients";
+import { UserDetails } from "@/app/types/users";
 
 interface CreateClientData {
   name: string;
@@ -28,4 +29,42 @@ export const getUserClientsApi = async (userID: string): Promise<Client[]> => {
 export const createClientApi = async (data: CreateClientData): Promise<Client> => {
   return await axiosInstance.post<CreateClientData, AxiosResponse<Client>>(`${USERS_MGT_URL}/clients`, data)
     .then((response) => response.data);
-};
\ No newline at end of file
+};
+
+export const updateUserPasswordApi = async (
+  userId: string,
+  tenant: string,
+  userData: UserDetails
+): Promise<any> => {
+  return await axiosInstance.put(`${USERS_MGT_URL}/updatePassword`, userData, {
+      params: { tenant, id: userId },
+    })
+    .then((response) => response.data);
+};
+
+
+export const updateClientApi = async (
+  data: CreateClientData,
+  client_id: string
+): Promise<any> => {
+  return await createAxiosInstance()
+    .put(`${USERS_MGT_URL}/clients/${client_id}`, data)
+    .then((response) => response.data);
+};
+
+export const generateTokenApi = async (data: AccessToken): Promise<any> => {
+  const response = await createAxiosInstance().post(`${USERS_MGT_URL}/token`, data);
+  return response.data;
+};
+
+// export const activateUserClientApi = async (data: ActivationData): Promise<any> => {
+//   return await createAxiosInstance()
+//     .post(`${USERS_MGT_URL}/clients/activate/${data._id}`, data)
+//     .then((response) => response.data);
+// };
+
+// export const activationRequestApi = async (clientID: string): Promise<any> => {
+//   return await createAxiosInstance()
+//     .get(`${USERS_MGT_URL}/clients/activate-request/${clientID}`)
+//     .then((response) => response.data);
+// };
\ No newline at end of file

From cc432dee809336c6d7f1d0429b0ae6ad9761c9b6 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 29 Jan 2025 15:04:00 +0300
Subject: [PATCH 10/32] Add clients slice and hooks for managing client data;
 integrate Radix UI toast notifications

---
 .../profile/components/ApiTokens.tsx          | 210 ++++++++++--------
 .../profile/components/CreateClientForm.tsx   | 141 ++++++++++++
 .../profile/components/EditClientForm.tsx     |  48 ++--
 netmanager-app/components/ui/toast.tsx        |  49 ++--
 netmanager-app/components/ui/toaster.tsx      |   2 +-
 netmanager-app/core/apis/settings.ts          |  28 ++-
 netmanager-app/core/hooks/useClients.ts       |  26 +++
 .../core/redux/slices/clientsSlice.ts         |  57 +++++
 netmanager-app/core/redux/store.ts            |   2 +
 netmanager-app/hooks/use-toast.ts             | 194 ++++++++++++++++
 netmanager-app/package-lock.json              |  60 +++++
 netmanager-app/package.json                   |   1 +
 12 files changed, 673 insertions(+), 145 deletions(-)
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/CreateClientForm.tsx
 create mode 100644 netmanager-app/core/hooks/useClients.ts
 create mode 100644 netmanager-app/core/redux/slices/clientsSlice.ts
 create mode 100644 netmanager-app/hooks/use-toast.ts

diff --git a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
index 8cf8840d02..c27e1621dc 100644
--- a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
@@ -2,117 +2,128 @@ import type React from "react"
 import { useEffect, useState } from "react"
 import moment from "moment"
 import { useAppDispatch, useAppSelector } from "@/core/redux/hooks"
-import { Toast } from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
 import { Button } from "@/components/ui/button"
-import {  performRefresh } from "@/lib/store/services/apiClient"
+import { performRefresh } from "@/core/redux/slices/clientsSlice"
 import EditClientForm from "./EditClientForm"
+import CreateClientForm from "./CreateClientForm"
 import DialogWrapper from "./DialogWrapper"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Skeleton } from "@/components/ui/skeleton"
-import { Edit, Copy, Info } from "lucide-react"
-import { api } from "../utils/api"tore"
+import { Edit, Copy, Info, Plus } from "lucide-react"
+import { users } from "@/core/apis/users"
+import { getUserClientsApi } from "@/core/apis/settings"
+import type { Client } from "@/app/types/clients"
+import { generateTokenApi, activationRequestApi } from "@/core/apis/settings"
 
 const UserClientsTable: React.FC = () => {
   const dispatch = useAppDispatch()
-  const [isError, setIsError] = useState({ isError: false, message: "", type: "" })
-  const [isActivationRequestError, setIsActivationRequestError] = useState({ isError: false, message: "", type: "" })
+  const { toast } = useToast()
   const [showInfoModal, setShowInfoModal] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [isLoadingToken, setIsLoadingToken] = useState(false)
   const [isLoadingActivationRequest, setIsLoadingActivationRequest] = useState(false)
   const [openEditForm, setOpenEditForm] = useState(false)
-  const [selectedClient, setSelectedClient] = useState(null)
+  const [openCreateForm, setOpenCreateForm] = useState(false)
+  const [selectedClient, setSelectedClient] = useState({} as Client)
   const userInfo = useAppSelector((state) => state.user.userDetails)
-  const clients = useAppSelector((state) => state.sites.clients)
-  const clientsDetails = useAppSelector((state) => state.sites.clientsDetails)
+  const [clients, setClients] = useState<Client[]>([])
+  const [clientsDetails, setClientsDetails] = useState<Client[]>([])
   const [currentPage, setCurrentPage] = useState(1)
   const itemsPerPage = 4
 
-  const onPageChange = (newPage: number) => {
-    setCurrentPage(newPage)
-  }
-
-  const setErrorState = (message: string, type: string) => {
-    setIsError({
-      isError: true,
-      message,
-      type,
-    })
+  const fetchClients = async () => {
+    setIsLoading(true)
+    try {
+      const res = await users.getUserDetails(userInfo?._id || "")
+      if (res) {
+        dispatch({ type: "ADD_CLIENTS", payload: res.users[0].clients })
+        setCurrentPage(1)
+      }
+      setClients(res.users[0].clients)
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "Error",
+        description: "Failed to fetch user details",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
   }
 
-  useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true)
-      try {
-        const res = await api.getUserDetailsAccount(userInfo?._id)
-        if (res.success === true) {
-          dispatch({ type: "ADD_CLIENTS", payload: res.users[0].clients })
-          setCurrentPage(1)
-        }
-      } catch (error) {
-        console.error(error)
-      } finally {
-        setIsLoading(false)
+  const fetchClientDetails = async () => {
+    setIsLoading(true)
+    try {
+      const response = await getUserClientsApi(userInfo?._id || "")
+      if (response) {
+        dispatch({ type: "ADD_CLIENTS_DETAILS", payload: response })
       }
+      setClientsDetails(response)
+    } catch (error) {
+      console.error(error)
+      toast({
+        title: "Error",
+        description: "Failed to fetch client details",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
     }
-    fetchData()
-  }, [userInfo?._id, dispatch])
+  }
 
   useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true)
-      try {
-        const response = await api.getClients(userInfo?._id)
-        if (response.success === true) {
-          dispatch({ type: "ADD_CLIENTS_DETAILS", payload: response.clients })
-        }
-      } catch (error) {
-        console.error(error)
-      } finally {
-        setIsLoading(false)
-      }
-    }
-    fetchData()
+    fetchClients()
+    fetchClientDetails()
   }, [userInfo?._id, dispatch])
 
   const hasAccessToken = (clientId: string) => {
     const client =
-      Array.isArray(clientsDetails) && (clientsDetails)
-        ? clientsDetails?.find((client: any) => client._id === clientId)
+      Array.isArray(clientsDetails) && clientsDetails
+        ? clientsDetails?.find((client: Client) => client._id === clientId)
         : undefined
     return client && client.access_token
   }
 
   const getClientToken = (clientID: string) => {
     const client =
-      Array.isArray(clientsDetails) && (clientsDetails)
-        ? clientsDetails?.find((client: any) => client._id === clientID)
+      Array.isArray(clientsDetails) && clientsDetails
+        ? clientsDetails?.find((client: Client) => client._id === clientID)
         : undefined
     return client && client.access_token && client.access_token.token
   }
 
   const getClientTokenExpiryDate = (clientID: string) => {
     const client =
-      Array.isArray(clientsDetails) && (clientsDetails)
-        ? clientsDetails?.find((client: any) => client._id === clientID)
+      Array.isArray(clientsDetails) && clientsDetails
+        ? clientsDetails?.find((client: Client) => client._id === clientID)
         : undefined
     return client && client.access_token && client.access_token.expires
   }
 
-  const handleGenerateToken = async (res: any) => {
+  const handleGenerateToken = async (res: Client) => {
     setIsLoadingToken(true)
     if (!res?.isActive) {
       setShowInfoModal(true)
       setIsLoadingToken(false)
     } else {
       try {
-        const response = await api.generateToken(res)
-        if (response.success === true) {
-          setErrorState("Token generated", "success")
+        const response = await generateTokenApi(res)
+        if (response) {
+          toast({
+            title: "Success",
+            description: "Token generated successfully",
+            variant: "success",
+          })
         }
         dispatch(performRefresh())
       } catch (error: any) {
-        setErrorState(error.message, "error")
+        toast({
+          title: "Error",
+          description: error.message || "Failed to generate token",
+          variant: "destructive",
+        })
       } finally {
         setIsLoadingToken(false)
       }
@@ -120,40 +131,51 @@ const UserClientsTable: React.FC = () => {
   }
 
   const handleActivationRequest = async () => {
-    const setActivationRequestErrorState = (message: string, type: string) => {
-      setIsActivationRequestError({
-        isError: true,
-        message,
-        type,
-      })
-    }
     setIsLoadingActivationRequest(true)
     try {
       const clientID = selectedClient?._id
-      const response = await api.activationRequest(clientID)
-      if (response.success === true) {
+      const response = await activationRequestApi(clientID)
+      if (response) {
         setShowInfoModal(false)
         setTimeout(() => {
-          setActivationRequestErrorState("Activation request sent successfully", "success")
+          toast({
+            title: "Success",
+            description: "Activation request sent successfully",
+            variant: "success",
+          })
         }, 3000)
       }
     } catch (error: any) {
       setShowInfoModal(false)
       setTimeout(() => {
-        setActivationRequestErrorState(error.message, "error")
+        toast({
+          title: "Error",
+          description: error.message || "Failed to send activation request",
+          variant: "destructive",
+        })
       }, 3000)
     } finally {
       setIsLoadingActivationRequest(false)
     }
   }
 
-  const displayIPAddresses = (client: any) => {
+  const displayIPAddresses = (client: Client) => {
     return Array.isArray(client.ip_addresses) ? client.ip_addresses.join(", ") : client.ip_addresses
   }
 
+  const handleClientCreated = () => {
+    fetchClients()
+    fetchClientDetails()
+  }
+
   return (
     <div className="overflow-x-auto">
-      {isError.isError && <Toast type={isError.type} message={isError.message} />}
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-2xl font-bold">Clients</h2>
+        <Button onClick={() => setOpenCreateForm(true)}>
+          <Plus className="mr-2 h-4 w-4" /> Create Client
+        </Button>
+      </div>
       <Table>
         <TableHeader>
           <TableRow>
@@ -176,7 +198,7 @@ const UserClientsTable: React.FC = () => {
           ) : clients?.length > 0 ? (
             clients
               .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
-              .map((client: any, index: number) => (
+              .map((client: Client, index: number) => (
                 <TableRow key={index}>
                   <TableCell className="font-medium">{client?.name}</TableCell>
                   <TableCell>{displayIPAddresses(client)}</TableCell>
@@ -189,20 +211,30 @@ const UserClientsTable: React.FC = () => {
                       {client?.isActive ? "Activated" : "Not Activated"}
                     </span>
                   </TableCell>
-                  <TableCell>{moment(client?.createdAt).format("MMM DD, YYYY")}</TableCell>
+                  <TableCell>
+                    {client?.access_token?.createdAt
+                      ? moment(client.access_token.createdAt).format("MMM DD, YYYY")
+                      : "N/A"}
+                  </TableCell>
                   <TableCell>
                     {getClientToken(client._id) ? (
                       <div className="flex items-center">
-                        <span className="mr-2">
-                          {getClientToken(client._id).slice(0, 2)}....
-                          {getClientToken(client._id).slice(-2)}
+                        <span className="mr-2 font-mono">
+                          {getClientToken(client._id).slice(0, 4)}
+                          <span className="mx-1">•••••••</span>
+                          {getClientToken(client._id).slice(-4)}
                         </span>
                         <Button
+                          title="Copy full token"
                           variant="ghost"
                           size="sm"
                           onClick={() => {
                             navigator.clipboard.writeText(getClientToken(client._id))
-                            setErrorState("Token copied to clipboard!", "success")
+                            toast({
+                              title: "Success",
+                              description: "API token copied to clipboard",
+                              variant: "success",
+                            })
                           }}
                         >
                           <Copy className="h-4 w-4" />
@@ -214,13 +246,8 @@ const UserClientsTable: React.FC = () => {
                         size="sm"
                         disabled={isLoadingToken}
                         onClick={() => {
-                          const res = {
-                            name: client.name,
-                            client_id: client._id,
-                            isActive: client.isActive ? client.isActive : false,
-                          }
                           setSelectedClient(client)
-                          handleGenerateToken(res)
+                          handleGenerateToken(client)
                         }}
                       >
                         Generate
@@ -255,10 +282,17 @@ const UserClientsTable: React.FC = () => {
         </TableBody>
       </Table>
       {/* Add your Pagination component here */}
-      {isActivationRequestError.isError && (
-        <Toast type={isActivationRequestError.type} message={isActivationRequestError.message} />
-      )}
-      <EditClientForm open={openEditForm} closeModal={() => setOpenEditForm(false)} data={selectedClient} />
+      <EditClientForm
+        open={openEditForm}
+        onClose={() => setOpenEditForm(false)}
+        data={selectedClient}
+        onClientUpdated={handleClientCreated}
+      />
+      <CreateClientForm
+        open={openCreateForm}
+        onClose={() => setOpenCreateForm(false)}
+        onClientCreated={handleClientCreated}
+      />
       <DialogWrapper
         open={showInfoModal}
         onClose={() => setShowInfoModal(false)}
diff --git a/netmanager-app/app/(authenticated)/profile/components/CreateClientForm.tsx b/netmanager-app/app/(authenticated)/profile/components/CreateClientForm.tsx
new file mode 100644
index 0000000000..f9546c8777
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/CreateClientForm.tsx
@@ -0,0 +1,141 @@
+import React, { useState } from 'react'
+import { useAppDispatch, useAppSelector } from "@/core/redux/hooks"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Plus, X } from 'lucide-react'
+import { createClientApi } from "@/core/apis/settings"
+import { Client } from "@/app/types/clients"
+import { useToast } from "@/components/ui/use-toast"
+
+interface CreateClientFormProps {
+  open: boolean
+  onClose: () => void
+  onClientCreated: () => void
+}
+
+const CreateClientForm: React.FC<CreateClientFormProps> = ({ open, onClose, onClientCreated }) => {
+  const dispatch = useAppDispatch()
+  const { toast } = useToast()
+  const userInfo = useAppSelector((state) => state.user.userDetails)
+  const [clientName, setClientName] = useState('')
+  const [ipAddresses, setIpAddresses] = useState([''])
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleInputValueChange = (type: string, value: string, index?: number) => {
+    if (type === 'clientName') {
+      setClientName(value)
+    } else if (type === 'ipAddress' && index !== undefined) {
+      const newIpAddresses = [...ipAddresses]
+      newIpAddresses[index] = value
+      setIpAddresses(newIpAddresses)
+    }
+  }
+
+  const handleRemoveInputValue = (index: number) => {
+    const newIpAddresses = ipAddresses.filter((_, i) => i !== index)
+    setIpAddresses(newIpAddresses)
+  }
+
+  const handleAddIpAddress = () => {
+    setIpAddresses([...ipAddresses, ''])
+  }
+
+  const handleSubmit = async () => {
+    setIsLoading(true)
+    try {
+      if (!clientName) {
+        throw new Error("Client name can't be empty")
+      }
+
+      const data = {
+        name: clientName,
+        user_id: userInfo?._id,
+        ip_addresses: ipAddresses.filter((ip) => ip.trim() !== ''),
+      }
+
+      const response = await createClientApi(data)
+      if (response) {
+        toast({
+          title: "Success",
+          description: "Client created successfully",
+          variant: "success",
+        })
+        onClientCreated()
+        onClose()
+      }
+    } catch (error: any) {
+      toast({
+        title: "Error",
+        description: error.message || "Failed to create client",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Client</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="clientName">Client Name</Label>
+            <Input
+              id="clientName"
+              value={clientName}
+              onChange={(e) => handleInputValueChange('clientName', e.target.value)}
+              placeholder="Enter client name"
+            />
+          </div>
+          {ipAddresses.map((ip, index) => (
+            <div key={index} className="grid gap-2">
+              <Label htmlFor={`ipAddress${index}`}>
+                {index === 0 ? 'IP Address (Optional)' : `IP Address ${index + 1}`}
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  id={`ipAddress${index}`}
+                  value={ip}
+                  onChange={(e) => handleInputValueChange('ipAddress', e.target.value, index)}
+                  placeholder={`Enter IP address ${index + 1}`}
+                />
+                {index > 0 && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemoveInputValue(index)}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+            </div>
+          ))}
+          <Button
+            variant="outline"
+            onClick={handleAddIpAddress}
+            className="flex items-center justify-start text-sm"
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            Add another IP address
+          </Button>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={isLoading}>
+            {isLoading ? 'Creating...' : 'Create Client'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default CreateClientForm
diff --git a/netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx b/netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx
index cf1fa0d508..2c9452e668 100644
--- a/netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx
@@ -1,43 +1,45 @@
 import React, { useState, useEffect, useCallback } from "react"
 import { useSelector, useDispatch } from "react-redux"
-import DialogWrapper from "@/components/Modal/DialogWrapper"
-import Toast from "@/components/Toast"
-import { addClients, addClientsDetails, performRefresh } from "@/lib/store/services/apiClient"
+import DialogWrapper from "./DialogWrapper"
+import { Toast } from "@/components/ui/toast"
+import { addClients, addClientsDetails, performRefresh } from "@/core/redux/slices/clientsSlice"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { X, Plus } from "lucide-react"
-import { api } from "../utils/api"
-import type { RootState } from "@/lib/store"
+import { users } from "@/core/apis/users"
+import type { RootState } from "@/core/redux/store"
+import { Client } from "@/app/types/clients"
+import { getUserClientsApi, updateClientApi } from "@/core/apis/settings"
 
 interface EditClientFormProps {
   open: boolean
-  closeModal: () => void
-  data: any
+  onClose: () => void;
+  data: Client
 }
 
-const EditClientForm: React.FC<EditClientFormProps> = ({ open, closeModal, data }) => {
+const EditClientForm: React.FC<EditClientFormProps> = ({ open, onClose, data }) => {
   const dispatch = useDispatch()
-  const userInfo = useSelector((state: RootState) => state.user.userInfo)
+  const userInfo = useSelector((state: RootState) => state.user.userDetails)
   const clientID = data?._id
   const [loading, setLoading] = useState(false)
   const [isError, setIsError] = useState({ isError: false, message: "", type: "" })
   const [clientName, setClientName] = useState("")
   const [ipAddresses, setIpAddresses] = useState([""])
 
-  useEffect(() => {
-    handleInitialData()
-  }, [handleInitialData]) // Updated dependency
-
-  const handleInitialData = () => {
-    setClientName(data?.name || "")
+  const handleInitialData = useCallback(() => {
+    setClientName(data?.name || "");
     const ipAddresses = Array.isArray(data?.ip_addresses)
       ? data?.ip_addresses
       : data?.ip_addresses
         ? [data?.ip_addresses]
-        : [""]
-    setIpAddresses(ipAddresses)
-  }
+        : [""];
+    setIpAddresses(ipAddresses);
+  }, [data]);
+  
+  useEffect(() => {
+    handleInitialData();
+  }, [handleInitialData]);
 
   const handleInputValueChange = useCallback((type: string, value: string, index?: number) => {
     if (type === "clientName") {
@@ -83,12 +85,12 @@ const EditClientForm: React.FC<EditClientFormProps> = ({ open, closeModal, data
         ip_addresses: ipAddresses.filter((ip) => ip.trim() !== ""),
       }
 
-      const response = await api.updateClient(data, clientID)
-      if (response.success !== true) {
+      const response = await updateClientApi(data, clientID)
+      if (!response) {
         throw new Error("Failed to update client")
       }
-      const res = await api.getUserDetailsAccount(userInfo?._id)
-      const resp = await api.getClients(userInfo?._id)
+      const res = await users.getUserDetails(userInfo?._id || "")
+      const resp = await getUserClientsApi(userInfo?._id || "")
       dispatch(addClients(res.users[0].clients))
       dispatch(addClientsDetails(resp.clients))
       dispatch(performRefresh())
@@ -121,7 +123,7 @@ const EditClientForm: React.FC<EditClientFormProps> = ({ open, closeModal, data
   return (
     <DialogWrapper
       open={open}
-      onClose={closeModal}
+      onClose={onClose}
       handleClick={handleSubmit}
       primaryButtonText="Update"
       loading={loading}
diff --git a/netmanager-app/components/ui/toast.tsx b/netmanager-app/components/ui/toast.tsx
index 428c489aa9..521b94b079 100644
--- a/netmanager-app/components/ui/toast.tsx
+++ b/netmanager-app/components/ui/toast.tsx
@@ -1,11 +1,13 @@
-import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
+"use client"
 
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
 
-const ToastProvider = ToastPrimitives.Provider;
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -19,15 +21,14 @@ const ToastViewport = React.forwardRef<
     )}
     {...props}
   />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        success: "bg-success text-success-foreground",
         default: "border bg-background text-foreground",
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
@@ -37,7 +38,7 @@ const toastVariants = cva(
       variant: "default",
     },
   }
-);
+)
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
@@ -50,9 +51,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -66,8 +67,8 @@ const ToastAction = React.forwardRef<
     )}
     {...props}
   />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -84,8 +85,8 @@ const ToastClose = React.forwardRef<
   >
     <X className="h-4 w-4" />
   </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -96,8 +97,8 @@ const ToastTitle = React.forwardRef<
     className={cn("text-sm font-semibold", className)}
     {...props}
   />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -108,12 +109,12 @@ const ToastDescription = React.forwardRef<
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
+type ToastActionElement = React.ReactElement<typeof ToastAction>
 
 export {
   type ToastProps,
@@ -125,4 +126,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-};
+}
diff --git a/netmanager-app/components/ui/toaster.tsx b/netmanager-app/components/ui/toaster.tsx
index e2233852a7..977302085d 100644
--- a/netmanager-app/components/ui/toaster.tsx
+++ b/netmanager-app/components/ui/toaster.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useToast } from "@/components/hooks/use-toast"
 import {
   Toast,
   ToastClose,
@@ -8,7 +9,6 @@ import {
   ToastTitle,
   ToastViewport,
 } from "@/components/ui/toast"
-import { useToast } from "@/components/ui/use-toast"
 
 export function Toaster() {
   const { toasts } = useToast()
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index 93bb0f4681..60424950ab 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -35,7 +35,7 @@ export const updateUserPasswordApi = async (
   userId: string,
   tenant: string,
   userData: UserDetails
-): Promise<any> => {
+): Promise<UserDetails> => {
   return await axiosInstance.put(`${USERS_MGT_URL}/updatePassword`, userData, {
       params: { tenant, id: userId },
     })
@@ -46,25 +46,35 @@ export const updateUserPasswordApi = async (
 export const updateClientApi = async (
   data: CreateClientData,
   client_id: string
-): Promise<any> => {
+): Promise<Client> => {
   return await createAxiosInstance()
     .put(`${USERS_MGT_URL}/clients/${client_id}`, data)
     .then((response) => response.data);
 };
 
-export const generateTokenApi = async (data: AccessToken): Promise<any> => {
-  const response = await createAxiosInstance().post(`${USERS_MGT_URL}/token`, data);
+export const generateTokenApi = async (data: Client): Promise<Client> => {
+  const response = await axiosInstance.post(`${USERS_MGT_URL}/token`, data);
   return response.data;
 };
 
+export const getClientsApi = async () => {
+  return axiosInstance.get(`${USERS_MGT_URL}/clients`).then((response) => response.data);
+};
+
+export const activateUserClientApi = async (data: { _id: string; isActive: boolean }) => {
+  return axiosInstance
+    .put(`${USERS_MGT_URL}/clients/activate`, data)
+    .then((response) => response.data);
+};
+
+
 // export const activateUserClientApi = async (data: ActivationData): Promise<any> => {
 //   return await createAxiosInstance()
 //     .post(`${USERS_MGT_URL}/clients/activate/${data._id}`, data)
 //     .then((response) => response.data);
 // };
 
-// export const activationRequestApi = async (clientID: string): Promise<any> => {
-//   return await createAxiosInstance()
-//     .get(`${USERS_MGT_URL}/clients/activate-request/${clientID}`)
-//     .then((response) => response.data);
-// };
\ No newline at end of file
+export const activationRequestApi = async (clientID: string): Promise<Client> => {
+  return await axiosInstance.get(`${USERS_MGT_URL}/clients/activate-request/${clientID}`)
+    .then((response) => response.data);
+};
\ No newline at end of file
diff --git a/netmanager-app/core/hooks/useClients.ts b/netmanager-app/core/hooks/useClients.ts
new file mode 100644
index 0000000000..ebad826dad
--- /dev/null
+++ b/netmanager-app/core/hooks/useClients.ts
@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+import { useDispatch } from "react-redux";
+import { getClientsApi } from "../apis/settings";
+import { setClients, setError} from "../redux/slices/clientsSlice";
+
+export const useClients = () => {
+  const dispatch = useDispatch();
+
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["clients"],
+    queryFn: () => getClientsApi(),
+    onSuccess: (data: any) => {
+      dispatch(setClients(data));
+    },
+    onError: (error: Error) => {
+      dispatch(setError(error.message));
+    },
+  });
+
+  return {
+    clients: data?.clients || [],
+    isLoading,
+    error: error as Error | null,
+  };
+};
diff --git a/netmanager-app/core/redux/slices/clientsSlice.ts b/netmanager-app/core/redux/slices/clientsSlice.ts
new file mode 100644
index 0000000000..5a51bb7e4d
--- /dev/null
+++ b/netmanager-app/core/redux/slices/clientsSlice.ts
@@ -0,0 +1,57 @@
+import { createSlice } from "@reduxjs/toolkit";
+import type { PayloadAction } from "@reduxjs/toolkit";
+import { Client } from "@/app/types/clients";
+
+export interface ClientsState {
+  clients: Client[];
+  isLoading: boolean;
+  error: string | null;
+  clientsDetails: Client[];
+  refresh: boolean;
+}
+
+const initialState: ClientsState = {
+  clients: [],
+  isLoading: false,
+  clientsDetails: [],
+  refresh: false,
+  error: null,
+};
+
+const clientSlice = createSlice({
+  name: "clients",
+  initialState,
+  reducers: {
+    setClients(state, action: PayloadAction<Client[]>) {
+      state.clients = action.payload;
+      state.isLoading = false;
+      state.error = null;
+    },
+    addClients: (state, action) => {
+      state.clients = action.payload;
+    },
+    addClientsDetails: (state, action) => {
+      state.clientsDetails = action.payload;
+    },
+    performRefresh: (state) => {
+      state.refresh = !state.refresh;
+    },
+    setLoading(state, action: PayloadAction<boolean>) {
+      state.isLoading = action.payload;
+    },
+    setError(state, action: PayloadAction<string>) {
+      state.error = action.payload;
+      state.isLoading = false;
+    },
+  },
+});
+
+export const {
+  setClients,
+  setLoading,
+  addClients,
+  addClientsDetails,
+  performRefresh,
+  setError,
+} = clientSlice.actions;
+export default clientSlice.reducer;
diff --git a/netmanager-app/core/redux/store.ts b/netmanager-app/core/redux/store.ts
index 6f7d1fd354..9b887c5220 100644
--- a/netmanager-app/core/redux/store.ts
+++ b/netmanager-app/core/redux/store.ts
@@ -4,6 +4,7 @@ import sitesReducer from "./slices/sitesSlice";
 import devicesReducer from "./slices/devicesSlice";
 import cohortsReducer from "./slices/cohortsSlice";
 import gridsReducer from "./slices/gridsSlice";
+import clientsRudcer from "./slices/clientsSlice";
 
 export const store = configureStore({
   reducer: {
@@ -12,6 +13,7 @@ export const store = configureStore({
     devices: devicesReducer,
     grids: gridsReducer,
     cohorts: cohortsReducer,
+    clients: clientsRudcer,
   },
 });
 
diff --git a/netmanager-app/hooks/use-toast.ts b/netmanager-app/hooks/use-toast.ts
new file mode 100644
index 0000000000..02e111d81d
--- /dev/null
+++ b/netmanager-app/hooks/use-toast.ts
@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/netmanager-app/package-lock.json b/netmanager-app/package-lock.json
index eecdb88570..b0125f7bb2 100644
--- a/netmanager-app/package-lock.json
+++ b/netmanager-app/package-lock.json
@@ -19,6 +19,7 @@
         "@radix-ui/react-select": "^2.1.4",
         "@radix-ui/react-slot": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.2",
+        "@radix-ui/react-toast": "^1.2.5",
         "@radix-ui/react-tooltip": "^1.1.6",
         "@reduxjs/toolkit": "^2.5.0",
         "@tanstack/react-query": "^5.62.11",
@@ -1125,6 +1126,65 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.5.tgz",
+      "integrity": "sha512-ZzUsAaOx8NdXZZKcFNDhbSlbsCUy8qQWmzTdgrlrhhZAOx2ofLtKrBDW9fkqhFvXgmtv560Uj16pkLkqML7SHA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.4",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.4.tgz",
+      "integrity": "sha512-XDUI0IVYVSwjMXxM6P4Dfti7AH+Y4oS/TB+sglZ/EXc7cqLwGAmp1NlMrcUjj7ks6R5WTZuWKv44FBbLpwU3sA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.6.tgz",
diff --git a/netmanager-app/package.json b/netmanager-app/package.json
index 712bc57959..a3489b14b9 100644
--- a/netmanager-app/package.json
+++ b/netmanager-app/package.json
@@ -20,6 +20,7 @@
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toast": "^1.2.5",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@reduxjs/toolkit": "^2.5.0",
     "@tanstack/react-query": "^5.62.11",

From 6d5b0d6ac62636f90072af1064479e90c6d75795 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Thu, 30 Jan 2025 22:38:27 +0300
Subject: [PATCH 11/32] Add Clients tab to profile page and adjust layout

---
 .../profile/components/Clients.tsx            | 290 ++++++++++++++++++
 .../profile/components/ProfileTabs.tsx        |   7 +-
 .../app/(authenticated)/profile/page.tsx      |   2 +-
 3 files changed, 297 insertions(+), 2 deletions(-)
 create mode 100644 netmanager-app/app/(authenticated)/profile/components/Clients.tsx

diff --git a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
new file mode 100644
index 0000000000..b0b8084ecf
--- /dev/null
+++ b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
@@ -0,0 +1,290 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { ActivateClientDialog, DeactivateClientDialog } from "@/components/clients/dialogs"
+import { getClientsApi, activateUserClientApi } from "@/core/apis/analytics"
+import { useToast } from "@/components/ui/use-toast"
+import type { Client } from "@/app/types/clients"
+import { Search, ArrowUpDown, Loader2 } from "lucide-react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+
+const ITEMS_PER_PAGE = 8
+
+const formatDate = (dateString: string | undefined): string => {
+  if (!dateString) return "N/A"
+  const date = new Date(dateString)
+  if (isNaN(date.getTime())) return "Invalid Date"
+
+  const now = new Date()
+  const diffTime = date.getTime() - now.getTime()
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+  if (diffDays < 0) return "Expired"
+  if (diffDays === 0) return "Expires today"
+  if (diffDays === 1) return "Expires tomorrow"
+  return `Expires in ${diffDays} days`
+}
+
+
+const ClientManagement = () => {
+  const [clients, setClients] = useState<Client[]>([])
+  const [loading, setLoading] = useState(false)
+  const [selectedClient, setSelectedClient] = useState<Client | null>(null)
+  const [activateDialogOpen, setActivateDialogOpen] = useState(false)
+  const [deactivateDialogOpen, setDeactivateDialogOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [sortField, setSortField] = useState<keyof Client>("name")
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")
+  const { toast } = useToast()
+
+  const fetchClients = async () => {
+    setLoading(true)
+    try {
+      const response = await getClientsApi()
+      setClients(response.clients)
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to fetch clients",
+        variant: "destructive",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCopyClientId = (clientId: string) => {
+    navigator.clipboard.writeText(clientId)
+    toast({
+      title: "Client ID Copied",
+      description: "The client ID has been copied to your clipboard.",
+    })
+  }
+
+  useEffect(() => {
+    fetchClients()
+  }, [])
+
+  const handleActivateDeactivate = async (clientId: string, activate: boolean) => {
+    try {
+      await activateUserClientApi({ _id: clientId, isActive: activate })
+      await fetchClients()
+      toast({
+        title: "Success",
+        description: `Client ${activate ? "activated" : "deactivated"} successfully`,
+      })
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: `Failed to ${activate ? "activate" : "deactivate"} client`,
+        variant: "destructive",
+      })
+    } finally {
+      setActivateDialogOpen(false)
+      setDeactivateDialogOpen(false)
+      setSelectedClient(null)
+    }
+  }
+
+  const handleActivateClick = (client: Client) => {
+    setSelectedClient(client)
+    setActivateDialogOpen(true)
+  }
+
+  const handleDeactivateClick = (client: Client) => {
+    setSelectedClient(client)
+    setDeactivateDialogOpen(true)
+  }
+
+  const handleSort = (field: keyof Client) => {
+    if (sortField === field) {
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc")
+    } else {
+      setSortField(field)
+      setSortOrder("asc")
+    }
+  }
+
+  const filteredClients = clients.filter(
+    (client) =>
+      client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      client.user.email.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const sortedClients = [...filteredClients].sort((a, b) => {
+    if (a[sortField] < b[sortField]) return sortOrder === "asc" ? -1 : 1
+    if (a[sortField] > b[sortField]) return sortOrder === "asc" ? 1 : -1
+    return 0
+  })
+
+  const totalPages = Math.ceil(sortedClients.length / ITEMS_PER_PAGE)
+  const paginatedClients = sortedClients.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
+
+  const activatedClients = clients.filter((client) => client.isActive).length
+  const deactivatedClients = clients.filter((client) => !client.isActive).length
+
+
+
+  return (
+    <div className=" py-2">
+      {loading ? (
+        <div className="flex justify-center items-center h-64">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <>
+          <div className="flex justify-between items-center mb-6">
+            <h1 className="text-2xl font-bold">Client Management</h1>
+            <Button onClick={fetchClients}>Refresh</Button>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4 mb-6">
+            <div className="bg-green-100 p-4 rounded-lg">
+              <h2 className="text-md font-semibold">Activated Clients</h2>
+              <p className="text-lg font-semibold">{activatedClients}</p>
+            </div>
+            <div className="bg-red-100 p-4 rounded-lg">
+              <h2 className="text-md font-semibold">Deactivated Clients</h2>
+              <p className="text-lg font-semibold">{deactivatedClients}</p>
+            </div>
+
+          </div>
+
+          <div className="flex items-center gap-2 mb-4">
+            <div className="relative flex-1 max-w-sm">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search clients..."
+                className="pl-8"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-2">
+                  Sort by <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => handleSort("name")}>
+                  Name {sortField === "name" && (sortOrder === "asc" ? "↑" : "↓")}
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleSort("isActive")}>
+                  Status {sortField === "isActive" && (sortOrder === "asc" ? "↑" : "↓")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[250px]">Client Name</TableHead>
+                  <TableHead>User Email</TableHead>
+                  <TableHead>Token Expiry</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead className="text-right">Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {paginatedClients.map((client) => (
+                  <TableRow key={client._id}>
+                    <TableCell>
+                      <div className="font-medium">{client.name}</div>
+                      <div className="text-sm text-muted-foreground">{client._id}</div>
+                    </TableCell>
+                    <TableCell>{client.user.email}</TableCell>
+                    <TableCell>
+                      {client.access_token?.expires 
+                        ? formatDate(client.access_token.expires) 
+                        : "N/A"}
+                    </TableCell>
+                    <TableCell>
+                      <span
+                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                            client.isActive
+                              ? "bg-green-100 text-green-800"
+                              : "bg-red-100 text-red-800"
+                          }`}
+                      >
+                        {client.isActive ? "Activated" : "Not Activated"}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="ghost"
+                        onClick={() => (client.isActive ? handleDeactivateClick(client) : handleActivateClick(client))}
+                      >
+                        {client.isActive ? "Deactivate" : "Activate"}
+                      </Button>
+                      <Button variant="ghost" onClick={() => handleCopyClientId(client._id)}>
+                        Copy ID
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          <div className="mt-4 flex justify-center">
+            <Pagination>
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious
+                    onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+                    className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                  />
+                </PaginationItem>
+                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                  <PaginationItem key={page}>
+                    <PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
+                      {page}
+                    </PaginationLink>
+                  </PaginationItem>
+                ))}
+                <PaginationItem>
+                  <PaginationNext
+                    onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
+                    className={currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          </div>
+
+          <ActivateClientDialog
+            open={activateDialogOpen}
+            onOpenChange={setActivateDialogOpen}
+            onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, true)}
+            clientName={selectedClient?.name}
+          />
+
+          <DeactivateClientDialog
+            open={deactivateDialogOpen}
+            onOpenChange={setDeactivateDialogOpen}
+            onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, false)}
+            clientName={selectedClient?.name}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+export default ClientManagement
+
diff --git a/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx b/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
index e2ce879cda..187de908cc 100644
--- a/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
@@ -5,16 +5,18 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import MyProfile from "./MyProfile"
 import PasswordEdit from "./PasswordEdit"
 import ApiTokens from "./ApiTokens"
+import ClientManagement from "./Clients"
 
 export default function ProfileTabs() {
   const [activeTab, setActiveTab] = useState("profile")
 
   return (
     <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-      <TabsList className="grid w-full grid-cols-3">
+      <TabsList className="grid w-full grid-cols-4">
         <TabsTrigger value="profile">My Profile</TabsTrigger>
         <TabsTrigger value="password">Password Edit</TabsTrigger>
         <TabsTrigger value="api">API Access Tokens</TabsTrigger>
+        <TabsTrigger value="clients">Clients</TabsTrigger>
       </TabsList>
       <TabsContent value="profile">
         <MyProfile />
@@ -25,6 +27,9 @@ export default function ProfileTabs() {
       <TabsContent value="api">
         <ApiTokens />
       </TabsContent>
+      <TabsContent value="clients">
+        <ClientManagement />
+      </TabsContent>
     </Tabs>
   )
 }
diff --git a/netmanager-app/app/(authenticated)/profile/page.tsx b/netmanager-app/app/(authenticated)/profile/page.tsx
index bef2140964..0266404bd8 100644
--- a/netmanager-app/app/(authenticated)/profile/page.tsx
+++ b/netmanager-app/app/(authenticated)/profile/page.tsx
@@ -2,7 +2,7 @@ import ProfileTabs from "./components/ProfileTabs"
 
 export default function ProfilePage() {
   return (
-    <div className="container mx-auto px-4 py-8">
+    <div className="container mx-auto px-4 ">
       <h1 className="text-3xl font-bold mb-6">User Profile</h1>
       <ProfileTabs />
     </div>

From d97fc005350eae372239dd41ffefed3c012b5703 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Thu, 30 Jan 2025 22:42:51 +0300
Subject: [PATCH 12/32] Add permission-based visibility for Clients tab in
 profile

---
 .../profile/components/ProfileTabs.tsx          | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx b/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
index 187de908cc..bec5206278 100644
--- a/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
@@ -6,17 +6,21 @@ import MyProfile from "./MyProfile"
 import PasswordEdit from "./PasswordEdit"
 import ApiTokens from "./ApiTokens"
 import ClientManagement from "./Clients"
+import { usePermissions } from "@/core/hooks/usePermissions"
 
 export default function ProfileTabs() {
   const [activeTab, setActiveTab] = useState("profile")
+  const { hasPermission } = usePermissions()
+
+  const canManageClients = hasPermission("CREATE_UPDATE_AND_DELETE_NETWORK_USERS")
 
   return (
     <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-      <TabsList className="grid w-full grid-cols-4">
+      <TabsList className={`grid w-full ${canManageClients ? "grid-cols-4" : "grid-cols-3"}`}>
         <TabsTrigger value="profile">My Profile</TabsTrigger>
         <TabsTrigger value="password">Password Edit</TabsTrigger>
         <TabsTrigger value="api">API Access Tokens</TabsTrigger>
-        <TabsTrigger value="clients">Clients</TabsTrigger>
+        {canManageClients && <TabsTrigger value="clients">Clients</TabsTrigger>}
       </TabsList>
       <TabsContent value="profile">
         <MyProfile />
@@ -27,10 +31,11 @@ export default function ProfileTabs() {
       <TabsContent value="api">
         <ApiTokens />
       </TabsContent>
-      <TabsContent value="clients">
-        <ClientManagement />
-      </TabsContent>
+      {canManageClients && (
+        <TabsContent value="clients">
+          <ClientManagement />
+        </TabsContent>
+      )}
     </Tabs>
   )
 }
-

From 5a827187f7d906386d930f1f535db97b4d74d1fc Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Thu, 30 Jan 2025 22:53:27 +0300
Subject: [PATCH 13/32] Fix client email display to handle undefined user cases

---
 .../app/(authenticated)/profile/components/Clients.tsx      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
index b0b8084ecf..578f9114cc 100644
--- a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
@@ -120,9 +120,10 @@ const ClientManagement = () => {
   const filteredClients = clients.filter(
     (client) =>
       client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      client.user.email.toLowerCase().includes(searchQuery.toLowerCase()),
+      (client.user?.email?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false)
   )
 
+
   const sortedClients = [...filteredClients].sort((a, b) => {
     if (a[sortField] < b[sortField]) return sortOrder === "asc" ? -1 : 1
     if (a[sortField] > b[sortField]) return sortOrder === "asc" ? 1 : -1
@@ -207,7 +208,8 @@ const ClientManagement = () => {
                       <div className="font-medium">{client.name}</div>
                       <div className="text-sm text-muted-foreground">{client._id}</div>
                     </TableCell>
-                    <TableCell>{client.user.email}</TableCell>
+                    <TableCell>{client.user && client.user.email ? client.user.email : "N/A"}</TableCell>
+
                     <TableCell>
                       {client.access_token?.expires 
                         ? formatDate(client.access_token.expires) 

From 5ff6a085de732ad01b446ee820ccb03bd50ad11a Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Sat, 1 Feb 2025 19:24:28 +0300
Subject: [PATCH 14/32] Refactor client activation API call to use POST method
 and update data structure

---
 .../app/(authenticated)/profile/components/Clients.tsx   | 9 +++++++--
 netmanager-app/core/apis/settings.ts                     | 9 +--------
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
index 578f9114cc..810f80627f 100644
--- a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
@@ -5,7 +5,8 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { ActivateClientDialog, DeactivateClientDialog } from "@/components/clients/dialogs"
-import { getClientsApi, activateUserClientApi } from "@/core/apis/analytics"
+import { getClientsApi } from "@/core/apis/analytics"
+import { activateUserClientApi } from "@/core/apis/settings"
 import { useToast } from "@/components/ui/use-toast"
 import type { Client } from "@/app/types/clients"
 import { Search, ArrowUpDown, Loader2 } from "lucide-react"
@@ -78,8 +79,12 @@ const ClientManagement = () => {
   }, [])
 
   const handleActivateDeactivate = async (clientId: string, activate: boolean) => {
+    const data = {
+      _id: clientId,
+      isActive: activate ? true : false,
+    };
     try {
-      await activateUserClientApi({ _id: clientId, isActive: activate })
+      await activateUserClientApi(data)
       await fetchClients()
       toast({
         title: "Success",
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index 60424950ab..3845a19e2e 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -63,17 +63,10 @@ export const getClientsApi = async () => {
 
 export const activateUserClientApi = async (data: { _id: string; isActive: boolean }) => {
   return axiosInstance
-    .put(`${USERS_MGT_URL}/clients/activate`, data)
+    .post(`${USERS_MGT_URL}/clients/activate/${data._id}`, data)
     .then((response) => response.data);
 };
 
-
-// export const activateUserClientApi = async (data: ActivationData): Promise<any> => {
-//   return await createAxiosInstance()
-//     .post(`${USERS_MGT_URL}/clients/activate/${data._id}`, data)
-//     .then((response) => response.data);
-// };
-
 export const activationRequestApi = async (clientID: string): Promise<Client> => {
   return await axiosInstance.get(`${USERS_MGT_URL}/clients/activate-request/${clientID}`)
     .then((response) => response.data);

From 6375ae94a613a2a767aa06fb2cb6a59a3fe07be4 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Sat, 1 Feb 2025 19:25:26 +0300
Subject: [PATCH 15/32] Remove "Copy ID" button from client management table

---
 .../app/(authenticated)/profile/components/Clients.tsx         | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
index 810f80627f..7261093e3d 100644
--- a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
@@ -238,9 +238,6 @@ const ClientManagement = () => {
                       >
                         {client.isActive ? "Deactivate" : "Activate"}
                       </Button>
-                      <Button variant="ghost" onClick={() => handleCopyClientId(client._id)}>
-                        Copy ID
-                      </Button>
                     </TableCell>
                   </TableRow>
                 ))}

From cf77a7f87ade13fa7c95300168febf8b61178a33 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Sat, 1 Feb 2025 19:26:23 +0300
Subject: [PATCH 16/32] Remove unused handleCopyClientId function from
 ClientManagement component

---
 .../app/(authenticated)/profile/components/Clients.tsx     | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
index 7261093e3d..92848b4b66 100644
--- a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/Clients.tsx
@@ -66,13 +66,6 @@ const ClientManagement = () => {
     }
   }
 
-  const handleCopyClientId = (clientId: string) => {
-    navigator.clipboard.writeText(clientId)
-    toast({
-      title: "Client ID Copied",
-      description: "The client ID has been copied to your clipboard.",
-    })
-  }
 
   useEffect(() => {
     fetchClients()

From 4ce1cc3b583d2d0514ab4a3704924e0c5ff2f201 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Sat, 1 Feb 2025 20:04:14 +0300
Subject: [PATCH 17/32] Enhance MyProfile component with improved user data
 fetching and error handling; add profile image upload functionality with size
 validation and success/error notifications.

---
 .../profile/components/MyProfile.tsx          | 125 +++++++++++++++---
 netmanager-app/components/sidebar.tsx         |  16 ---
 netmanager-app/core/apis/settings.ts          |   2 +-
 3 files changed, 106 insertions(+), 37 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
index 52cc7f1176..0a6e04f42b 100644
--- a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
@@ -11,33 +11,65 @@ import { getCountries } from "@/utils/countries";
 import { getTimezones } from "@/utils/timezones";
 import { users } from "@/core/apis/users";
 import { useAppSelector } from "@/core/redux/hooks";
+import { useToast } from "@/components/ui/use-toast"
 
+interface Profile {
+  firstName: string;
+  lastName: string;
+  email: string;
+  jobTitle?: string;
+  country?: string;
+  timezone?: string;
+  bio?: string;
+  profilePicture?: string;
+}
 export default function MyProfile() {
   const currentuser = useAppSelector((state) => state.user.userDetails);
-  const [profile, setProfile] = useState<any>(null);
+  const { toast } = useToast()
+
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [isLoading, setIsLoading] = useState(true);  
+  const [error, setError] = useState<string | null>(null);  
   const [isEditing, setIsEditing] = useState(false);
   const [countries, setCountries] = useState<{ value: string; label: string }[]>([]);
   const [timezones, setTimezones] = useState<{ value: string; label: string }[]>([]);
 
   useEffect(() => {
     const fetchUserData = async () => {
-      if (currentuser) {
+      if (!currentuser) return;
+  
+      setIsLoading(true);
+      setError(null);
+  
+      try {
         const response = await users.getUserDetails(currentuser._id);
-        const userData = response.users[0]; 
-        setProfile({
-          firstName: userData.firstName,
-          lastName: userData.lastName,
-          email: userData.email,
-          jobTitle: userData.jobTitle,
-          country: userData.country,
-          timezone: userData.timezone,
-          bio: userData.description,
-          profilePicture: userData.profilePicture,
-        });
+        const userData = response?.users?.[0];
+  
+        if (userData) {
+          setProfile({
+            firstName: userData.firstName || "",
+            lastName: userData.lastName || "",
+            email: userData.email || "",
+            jobTitle: userData.jobTitle || "",
+            country: userData.country || "",
+            timezone: userData.timezone || "",
+            bio: userData.description || "",
+            profilePicture: userData.profilePicture || "",
+          });
+        } else {
+          setError("User data not found");
+        }
+      } catch (error) {
+        setError("Failed to fetch user data");
+        console.error("Error fetching user data:", error);
+      } finally {
+        setIsLoading(false);
       }
     };
+  
     fetchUserData();
   }, [currentuser]);
+  
 
   useEffect(() => {
     setCountries(getCountries());
@@ -45,11 +77,13 @@ export default function MyProfile() {
   }, []);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setProfile({ ...profile, [e.target.name]: e.target.value });
+    if (profile) {
+      setProfile({ ...profile, [e.target.name]: e.target.value } as Profile);
+    }
   };
 
   const handleSelectChange = (name: string) => (value: string) => {
-    setProfile({ ...profile, [name]: value });
+    setProfile({ ...profile, [name]: value } as Profile);
   };
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -57,16 +91,67 @@ export default function MyProfile() {
     setIsEditing(false);
   };
 
-  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const MAX_FILE_SIZE = 5 * 1024 * 1024;
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
-    if (file) {
+    if (!file) return;
+
+    if (file.size > MAX_FILE_SIZE) {
+      toast({
+        title: "Error",
+        description: "File size should not exceed 5MB",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
       const reader = new FileReader();
-      reader.onloadend = () => {
-        setProfile({ ...profile, profilePicture: reader.result as string });
-      };
       reader.readAsDataURL(file);
+      reader.onload = async () => {
+        if (!reader.result) return;
+  
+        setProfile((prev) => ({
+          ...prev,
+          profilePicture: reader.result as string, // Temporary preview
+        }));
+  
+        // Upload image to server
+        const formData = new FormData();
+        formData.append("image", file);
+  
+        const response = await fetch("/api/upload-profile-image", {
+          method: "POST",
+          body: formData,
+        });
+  
+        if (!response.ok) throw new Error("Failed to upload image");
+  
+        const data = await response.json();
+        setProfile((prev) => ({
+          ...prev,
+          profilePicture: data.imageUrl, // Update with uploaded URL
+        }));
+  
+        toast({
+          title: "Success",
+          description: "Profile image uploaded successfully",
+        });
+      };
+    } catch (error) {
+      console.error("Error uploading image:", error);
+      toast({
+        title: "Error",
+        description: "An error occurred while uploading the image. Please try again.",
+        variant: "destructive",
+      });
     }
   };
+  
+
+
+
 
   if (!profile) {
     return <div>Loading...</div>;
diff --git a/netmanager-app/components/sidebar.tsx b/netmanager-app/components/sidebar.tsx
index 2dc2b65a10..c419bf1987 100644
--- a/netmanager-app/components/sidebar.tsx
+++ b/netmanager-app/components/sidebar.tsx
@@ -18,7 +18,6 @@ import {
   Map,
   ChevronDown,
   Check,
-  Hospital,
   PlusCircle,
   MonitorSmartphone,
   LogOut,
@@ -211,21 +210,6 @@ const Sidebar = () => {
                     </Link>
                   </li>
                 </PermissionGuard>
-                <PermissionGuard permission="CREATE_UPDATE_AND_DELETE_NETWORK_ROLES">
-                  <li>
-                    <Link
-                      href="/clients"
-                      className={`flex items-center gap-2 text-sm text-foreground hover:bg-accent hover:text-accent-foreground p-2 rounded-md ${
-                        isActive("/access-control")
-                          ? "bg-accent text-accent-foreground"
-                          : ""
-                      }`}
-                    >
-                      <Hospital size={18} />
-                      <span>Clients</span>
-                    </Link>
-                  </li>
-                </PermissionGuard>
                 <li>
                   <Link
                     href="/organizations"
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index 3845a19e2e..0b0f582c25 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -1,7 +1,7 @@
 import createAxiosInstance from "./axiosConfig";
 import { AxiosResponse } from "axios";
 import { USERS_MGT_URL} from "@/core/urls";
-import { Client, AccessToken } from "@/app/types/clients";
+import { Client } from "@/app/types/clients";
 import { UserDetails } from "@/app/types/users";
 
 interface CreateClientData {

From 6cb5db2c77df094e1c3cf93ca7212ba148ffeced Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Sat, 1 Feb 2025 20:12:20 +0300
Subject: [PATCH 18/32] Enhance MyProfile component with loading indicator and
 error display; improve profile picture upload handling and state management.

---
 .../profile/components/MyProfile.tsx          | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
index 0a6e04f42b..b73ae9d8af 100644
--- a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
@@ -12,6 +12,8 @@ import { getTimezones } from "@/utils/timezones";
 import { users } from "@/core/apis/users";
 import { useAppSelector } from "@/core/redux/hooks";
 import { useToast } from "@/components/ui/use-toast"
+import { Loader2 } from "lucide-react";
+import { Toast } from "@/components/ui/toast";
 
 interface Profile {
   firstName: string;
@@ -29,7 +31,8 @@ export default function MyProfile() {
 
   const [profile, setProfile] = useState<Profile | null>(null);
   const [isLoading, setIsLoading] = useState(true);  
-  const [error, setError] = useState<string | null>(null);  
+  const [error, setError] = useState<string | null>(null); 
+  
   const [isEditing, setIsEditing] = useState(false);
   const [countries, setCountries] = useState<{ value: string; label: string }[]>([]);
   const [timezones, setTimezones] = useState<{ value: string; label: string }[]>([]);
@@ -112,12 +115,11 @@ export default function MyProfile() {
       reader.onload = async () => {
         if (!reader.result) return;
   
-        setProfile((prev) => ({
+        setProfile((prev) => prev ? ({
           ...prev,
-          profilePicture: reader.result as string, // Temporary preview
-        }));
-  
-        // Upload image to server
+          profilePicture: reader.result as string,
+        }) : null);
+
         const formData = new FormData();
         formData.append("image", file);
   
@@ -129,10 +131,17 @@ export default function MyProfile() {
         if (!response.ok) throw new Error("Failed to upload image");
   
         const data = await response.json();
-        setProfile((prev) => ({
+        setProfile((prev) => prev ? ({
           ...prev,
-          profilePicture: data.imageUrl, // Update with uploaded URL
-        }));
+          profilePicture: data.imageUrl, 
+          firstName: prev.firstName,
+          lastName: prev.lastName,
+          email: prev.email,
+          jobTitle: prev.jobTitle,
+          country: prev.country,
+          timezone: prev.timezone,
+          bio: prev.bio,
+        }) : null);
   
         toast({
           title: "Success",
@@ -148,10 +157,7 @@ export default function MyProfile() {
       });
     }
   };
-  
-
-
-
+ 
 
   if (!profile) {
     return <div>Loading...</div>;
@@ -159,6 +165,13 @@ export default function MyProfile() {
 
   return (
     <div className="space-y-6">
+      {error && <Toast variant="destructive">{error}</Toast>}
+      {isLoading ? (
+        <div className="flex justify-center items-center h-64">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <>
       <h2 className="text-2xl font-bold">Personal Information</h2>
       <p className="text-sm text-gray-500">Update your photo and personal details.</p>
 
@@ -283,6 +296,8 @@ export default function MyProfile() {
         </div>
           <Button type="submit">Save Changes</Button>
       </form>
+      </>
+      )}
     </div>
   );
 }

From 5307a674f1b788db9d3d573fa8b389c441e249cb Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Sat, 1 Feb 2025 22:04:06 +0300
Subject: [PATCH 19/32] Add Cloudinary image upload API and update user details
 API; refactor toast hook import

---
 .../profile/components/MyProfile.tsx          | 530 +++++++++---------
 netmanager-app/components/ui/toaster.tsx      |   2 +-
 netmanager-app/core/apis/cloudinary.ts        |   8 +
 netmanager-app/core/apis/settings.ts          |  10 +-
 4 files changed, 287 insertions(+), 263 deletions(-)
 create mode 100644 netmanager-app/core/apis/cloudinary.ts

diff --git a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
index b73ae9d8af..460345bf3d 100644
--- a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
@@ -1,303 +1,315 @@
-"use client";
+"use client"
 
-import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
-import { getCountries } from "@/utils/countries";
-import { getTimezones } from "@/utils/timezones";
-import { users } from "@/core/apis/users";
-import { useAppSelector } from "@/core/redux/hooks";
+import { useState, useEffect, useCallback } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { updateUserDetailsApi } from "@/core/apis/settings"
+import { Avatar, AvatarImage } from "@/components/ui/avatar"
+import { getCountries } from "@/utils/countries"
+import { getTimezones } from "@/utils/timezones"
+import { users } from "@/core/apis/users"
+import { useAppSelector, useAppDispatch } from "@/core/redux/hooks"
 import { useToast } from "@/components/ui/use-toast"
-import { Loader2 } from "lucide-react";
-import { Toast } from "@/components/ui/toast";
+import { Toaster } from "@/components/ui/toaster"
+import { Loader2, Upload, Trash2 } from "lucide-react"
+import { cloudinaryImageUpload } from "@/core/apis/cloudinary"
+import { setUserDetails } from "@/core/redux/slices/userSlice"
 
 interface Profile {
-  firstName: string;
-  lastName: string;
-  email: string;
-  jobTitle?: string;
-  country?: string;
-  timezone?: string;
-  bio?: string;
-  profilePicture?: string;
+  firstName: string
+  lastName: string
+  email: string
+  jobTitle?: string
+  country?: string
+  timezone?: string
+  description?: string
+  profilePicture?: string
 }
+
 export default function MyProfile() {
-  const currentuser = useAppSelector((state) => state.user.userDetails);
+  const currentUser = useAppSelector((state) => state.user.userDetails)
   const { toast } = useToast()
+  const dispatch = useAppDispatch()
 
-  const [profile, setProfile] = useState<Profile | null>(null);
-  const [isLoading, setIsLoading] = useState(true);  
-  const [error, setError] = useState<string | null>(null); 
-  
-  const [isEditing, setIsEditing] = useState(false);
-  const [countries, setCountries] = useState<{ value: string; label: string }[]>([]);
-  const [timezones, setTimezones] = useState<{ value: string; label: string }[]>([]);
+  const [profile, setProfile] = useState<Profile | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [countries, setCountries] = useState<{ value: string; label: string }[]>([])
+  const [timezones, setTimezones] = useState<{ value: string; label: string }[]>([])
+  const [profileUploading, setProfileUploading] = useState(false)
 
-  useEffect(() => {
-    const fetchUserData = async () => {
-      if (!currentuser) return;
-  
-      setIsLoading(true);
-      setError(null);
-  
-      try {
-        const response = await users.getUserDetails(currentuser._id);
-        const userData = response?.users?.[0];
-  
-        if (userData) {
-          setProfile({
-            firstName: userData.firstName || "",
-            lastName: userData.lastName || "",
-            email: userData.email || "",
-            jobTitle: userData.jobTitle || "",
-            country: userData.country || "",
-            timezone: userData.timezone || "",
-            bio: userData.description || "",
-            profilePicture: userData.profilePicture || "",
-          });
-        } else {
-          setError("User data not found");
-        }
-      } catch (error) {
-        setError("Failed to fetch user data");
-        console.error("Error fetching user data:", error);
-      } finally {
-        setIsLoading(false);
+  const fetchUserData = useCallback(async () => {
+    if (!currentUser) return
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const response = await users.getUserDetails(currentUser._id)
+      const userData = response?.users?.[0]
+
+      if (userData) {
+        setProfile({
+          firstName: userData.firstName || "",
+          lastName: userData.lastName || "",
+          email: userData.email || "",
+          jobTitle: userData.jobTitle || "",
+          country: userData.country || "",
+          timezone: userData.timezone || "",
+          description: userData.description || "",
+          profilePicture: userData.profilePicture || "",
+        })
+      } else {
+        setError("User data not found")
       }
-    };
-  
-    fetchUserData();
-  }, [currentuser]);
-  
+    } catch (error) {
+      setError("Failed to fetch user data")
+      toast({
+        title: "Error",
+        description: "Failed to fetch user data",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }, [currentUser, toast])
 
   useEffect(() => {
-    setCountries(getCountries());
-    setTimezones(getTimezones());
-  }, []);
+    fetchUserData()
+  }, [fetchUserData])
+
+  useEffect(() => {
+    setCountries(getCountries())
+    setTimezones(getTimezones())
+  }, [])
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if (profile) {
-      setProfile({ ...profile, [e.target.name]: e.target.value } as Profile);
+      setProfile({ ...profile, [e.target.name]: e.target.value })
     }
-  };
+  }
 
   const handleSelectChange = (name: string) => (value: string) => {
-    setProfile({ ...profile, [name]: value } as Profile);
-  };
+    if (profile) {
+      setProfile({ ...profile, [name]: value })
+    }
+  }
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsEditing(false);
-  };
+  const handleProfileImageUpdate = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
 
-  const MAX_FILE_SIZE = 5 * 1024 * 1024;
+    const formData = new FormData()
+    formData.append("file", file)
+    formData.append("upload_preset", process.env.NEXT_PUBLIC_CLOUDINARY_PRESET || "")
+    formData.append("folder", "profiles")
+
+    setProfileUploading(true)
+    try {
+      const responseData = await cloudinaryImageUpload(formData)
+      if (profile && currentUser) {
+        const updatedProfile = { ...profile, profilePicture: responseData.secure_url }
+        setProfile(updatedProfile)
+        await updateUserDetailsApi({ profilePicture: responseData.secure_url }, currentUser._id)
+        dispatch(setUserDetails({ ...currentUser, profilePicture: responseData.secure_url }))
+        toast({
+          title: "Success",
+          description: "Profile picture updated successfully",
+        })
+      }
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to update profile picture",
+      })
+    } finally {
+      setProfileUploading(false)
+    }
+  }
 
-  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
+  const deleteProfileImage = async () => {
+    if (!profile || !currentUser) return
 
-    if (file.size > MAX_FILE_SIZE) {
+    try {
+      const updatedProfile = { ...profile, profilePicture: "" }
+      setProfile(updatedProfile)
+      await updateUserDetailsApi({ profilePicture: "" }, currentUser._id)
+      dispatch(setUserDetails({ ...currentUser, profilePicture: "" }))
+      toast({
+        title: "Success",
+        description: "Profile picture deleted successfully",
+      })
+    } catch (error) {
       toast({
         title: "Error",
-        description: "File size should not exceed 5MB",
-        variant: "destructive",
-      });
-      return;
+        description: "Failed to delete profile picture",
+      })
     }
+  }
 
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!profile || !currentUser) return
+
+    setIsLoading(true)
     try {
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = async () => {
-        if (!reader.result) return;
-  
-        setProfile((prev) => prev ? ({
-          ...prev,
-          profilePicture: reader.result as string,
-        }) : null);
+      await updateUserDetailsApi(profile, currentUser._id)
+      const res = await users.getUserDetails(currentUser._id)
+      const updatedUser = res.users[0]
 
-        const formData = new FormData();
-        formData.append("image", file);
-  
-        const response = await fetch("/api/upload-profile-image", {
-          method: "POST",
-          body: formData,
-        });
-  
-        if (!response.ok) throw new Error("Failed to upload image");
-  
-        const data = await response.json();
-        setProfile((prev) => prev ? ({
-          ...prev,
-          profilePicture: data.imageUrl, 
-          firstName: prev.firstName,
-          lastName: prev.lastName,
-          email: prev.email,
-          jobTitle: prev.jobTitle,
-          country: prev.country,
-          timezone: prev.timezone,
-          bio: prev.bio,
-        }) : null);
-  
-        toast({
-          title: "Success",
-          description: "Profile image uploaded successfully",
-        });
-      };
+      if (!updatedUser) {
+        throw new Error("User details not updated")
+      }
+
+      dispatch(setUserDetails({ ...currentUser, ...updatedUser }))
+      toast({
+        title: "Success",
+        description: "User details updated successfully",
+      })
     } catch (error) {
-      console.error("Error uploading image:", error);
+      setError("Failed to update user details")
       toast({
         title: "Error",
-        description: "An error occurred while uploading the image. Please try again.",
-        variant: "destructive",
-      });
+        description: "Failed to update user details",
+      })
+    } finally {
+      setIsLoading(false)
     }
-  };
- 
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <Loader2 className="h-8 w-8 animate-spin" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <>
+        <div className="text-red-500">{error}</div>
+        <Toaster />
+      </>
+    )
+  }
 
   if (!profile) {
-    return <div>Loading...</div>;
+    return <div>No profile data available.</div>
   }
 
   return (
-    <div className="space-y-6">
-      {error && <Toast variant="destructive">{error}</Toast>}
-      {isLoading ? (
-        <div className="flex justify-center items-center h-64">
-          <Loader2 className="h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-      <h2 className="text-2xl font-bold">Personal Information</h2>
-      <p className="text-sm text-gray-500">Update your photo and personal details.</p>
+    <>
+      <div className="space-y-6">
+        <h2 className="text-2xl font-bold">Personal Information</h2>
+        <p className="text-sm text-gray-500">Update your photo and personal details.</p>
 
-      <form onSubmit={handleSubmit} className="space-y-8">
-        <div className="flex items-center space-x-4">
-          <Avatar className="w-24 h-24">
-            {profile?.profilePicture ? (
-              <AvatarImage
-                src={profile.profilePicture}
-                alt={`${profile.firstName} ${profile.lastName}`}
-              />
-            ) : (
-              <div className="bg-gray-200 w-full h-full flex items-center justify-center">
-                <span className="text-gray-500">No Image</span>
-              </div>
-            )}
-          </Avatar>
-          <div>
-            <Button type="button" variant="outline" className="mb-2">
-              <Label htmlFor="avatar-upload" className="cursor-pointer">
-                Update
-              </Label>
-            </Button>
-            <Input
-              id="avatar-upload"
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={handleImageUpload}
-              disabled={isEditing}
-            />
-            <Button type="button" variant="outline" className="text-red-500">
-              Delete
-            </Button>
+        <form onSubmit={handleSubmit} className="space-y-8">
+          <div className="flex items-center space-x-4">
+            <Avatar className="w-24 h-24">
+              {profile.profilePicture ? (
+                <AvatarImage src={profile.profilePicture} alt={`${profile.firstName} ${profile.lastName}`} />
+              ) : (
+                <div className="bg-gray-200 w-full h-full flex items-center justify-center">
+                  <span className="text-gray-500">No Image</span>
+                </div>
+              )}
+            </Avatar>
+            <div className="flex gap-4">
+              <Button type="button" variant="outline" className="mb-2" disabled={profileUploading}>
+                <Label htmlFor="avatar-upload" className="cursor-pointer">
+                  {profileUploading ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <Upload className="h-4 w-4 mr-2" />
+                  )}
+                  Update
+                </Label>
+                <Input
+                  id="avatar-upload"
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleProfileImageUpdate}
+                  disabled={profileUploading}
+                />
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                className="text-red-500"
+                onClick={deleteProfileImage}
+                disabled={!profile.profilePicture}
+              >
+                <Trash2 className="h-4 w-4 mr-2" />
+                Delete
+              </Button>
+            </div>
           </div>
-        </div>
 
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <div className="space-y-2">
-            <Label htmlFor="firstName">First name</Label>
-            <Input
-              id="firstName"
-              name="firstName"
-              value={profile.firstName || ""}
-              onChange={handleInputChange}
-              disabled={isEditing}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="lastName">Last name</Label>
-            <Input
-              id="lastName"
-              name="lastName"
-              value={profile.lastName || ""}
-              onChange={handleInputChange}
-              disabled={isEditing}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
-              name="email"
-              type="email"
-              value={profile.email || ""}
-              onChange={handleInputChange}
-              disabled={isEditing}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="jobTitle">Job title</Label>
-            <Input
-              id="jobTitle"
-              name="jobTitle"
-              value={profile.jobTitle || ""}
-              onChange={handleInputChange}
-              disabled={isEditing}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="country">Country</Label>
-            <Select value={profile.country} onValueChange={handleSelectChange("country")} disabled={isEditing}>
-              <SelectTrigger>
-                <SelectValue placeholder="Select a country" />
-              </SelectTrigger>
-              <SelectContent>
-                {countries.map((country) => (
-                  <SelectItem key={country.value} value={country.value}>
-                    {country.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="firstName">First name</Label>
+              <Input id="firstName" name="firstName" value={profile.firstName} onChange={handleInputChange} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="lastName">Last name</Label>
+              <Input id="lastName" name="lastName" value={profile.lastName} onChange={handleInputChange} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" name="email" type="email" value={profile.email} onChange={handleInputChange} disabled />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="jobTitle">Job title</Label>
+              <Input id="jobTitle" name="jobTitle" value={profile.jobTitle || ""} onChange={handleInputChange} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="country">Country</Label>
+              <Select value={profile.country} onValueChange={handleSelectChange("country")}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a country" />
+                </SelectTrigger>
+                <SelectContent>
+                  {countries.map((country) => (
+                    <SelectItem key={country.value} value={country.value}>
+                      {country.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="timezone">Timezone</Label>
+              <Select value={profile.timezone} onValueChange={handleSelectChange("timezone")}>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a timezone" />
+                </SelectTrigger>
+                <SelectContent>
+                  {timezones.map((timezone) => (
+                    <SelectItem key={timezone.value} value={timezone.value}>
+                      {timezone.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
           </div>
+
           <div className="space-y-2">
-            <Label htmlFor="timezone">Timezone</Label>
-            <Select value={profile.timezone} onValueChange={handleSelectChange("timezone")} disabled={isEditing}>
-              <SelectTrigger>
-                <SelectValue placeholder="Select a timezone" />
-              </SelectTrigger>
-              <SelectContent>
-                {timezones.map((timezone) => (
-                  <SelectItem key={timezone.value} value={timezone.value}>
-                    {timezone.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <Label htmlFor="description">Bio</Label>
+            <Textarea id="description" name="description" value={profile.description || ""} onChange={handleInputChange} rows={4} />
           </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="description">Bio</Label>
-          <Textarea
-            id="description"
-            name="description"
-            value={profile.bio || ""}
-            onChange={handleInputChange}
-            disabled={isEditing}
-            rows={4}
-          />
-        </div>
-          <Button type="submit">Save Changes</Button>
-      </form>
-      </>
-      )}
-    </div>
-  );
+          <Button type="submit" disabled={isLoading}>
+            {isLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
+            Save Changes
+          </Button>
+        </form>
+      </div>
+      <Toaster />
+    </>
+  )
 }
+
diff --git a/netmanager-app/components/ui/toaster.tsx b/netmanager-app/components/ui/toaster.tsx
index 977302085d..171beb46d9 100644
--- a/netmanager-app/components/ui/toaster.tsx
+++ b/netmanager-app/components/ui/toaster.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useToast } from "@/components/hooks/use-toast"
+import { useToast } from "@/hooks/use-toast"
 import {
   Toast,
   ToastClose,
diff --git a/netmanager-app/core/apis/cloudinary.ts b/netmanager-app/core/apis/cloudinary.ts
new file mode 100644
index 0000000000..9721e050be
--- /dev/null
+++ b/netmanager-app/core/apis/cloudinary.ts
@@ -0,0 +1,8 @@
+const cloudinaryUrl = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_NAME}`;
+
+export const cloudinaryImageUpload = async (formData: any) => {
+  return await fetch(`${cloudinaryUrl}/image/upload`, {
+    method: 'POST',
+    body: formData,
+  }).then((response) => response.json());
+};
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index 0b0f582c25..6671f02673 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -47,8 +47,7 @@ export const updateClientApi = async (
   data: CreateClientData,
   client_id: string
 ): Promise<Client> => {
-  return await createAxiosInstance()
-    .put(`${USERS_MGT_URL}/clients/${client_id}`, data)
+  return await axiosInstance.put(`${USERS_MGT_URL}/clients/${client_id}`, data)
     .then((response) => response.data);
 };
 
@@ -70,4 +69,9 @@ export const activateUserClientApi = async (data: { _id: string; isActive: boole
 export const activationRequestApi = async (clientID: string): Promise<Client> => {
   return await axiosInstance.get(`${USERS_MGT_URL}/clients/activate-request/${clientID}`)
     .then((response) => response.data);
-};
\ No newline at end of file
+};
+
+export const updateUserDetailsApi = async (data: any, userID: string): Promise<UserDetails> => {
+  return await axiosInstance.put(`${USERS_MGT_URL}/${userID}`, data)
+    .then((response) => response.data);
+}
\ No newline at end of file

From c0f547d8d3445cf48f74e37de88acc8899385fba Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Sun, 2 Feb 2025 10:06:10 +0300
Subject: [PATCH 20/32] Implement password change functionality with validation
 and strength indicator; enhance user feedback with loading states and error
 handling

---
 .../profile/components/PasswordEdit.tsx       | 245 +++++++++++++++---
 netmanager-app/core/apis/settings.ts          |  14 +-
 2 files changed, 218 insertions(+), 41 deletions(-)

diff --git a/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx b/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
index e4a6c33b5c..881be832fc 100644
--- a/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
+++ b/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
@@ -4,61 +4,236 @@ import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { useAppSelector } from "@/core/redux/hooks"
+import { updateUserPasswordApi } from "@/core/apis/settings"
+import { useToast } from "@/components/ui/use-toast"
+import { Progress } from "@/components/ui/progress"
+import { Eye, EyeOff } from "lucide-react"
 
 export default function PasswordEdit() {
+  const currentUser = useAppSelector((state) => state.user.userDetails)
+  const { toast } = useToast()
+  const [isLoading, setIsLoading] = useState(false)
+  const [showPassword, setShowPassword] = useState({
+    current: false,
+    new: false,
+    confirm: false,
+  })
+
+  const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
+
   const [passwords, setPasswords] = useState({
-    current: "",
-    new: "",
-    confirm: "",
+    currentPassword: "",
+    newPassword: "",
+    confirmNewPassword: "",
+  })
+
+  const [errors, setErrors] = useState({
+    currentPassword: "",
+    newPassword: "",
+    confirmNewPassword: "",
   })
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPasswords({ ...passwords, [e.target.name]: e.target.value })
+    const { name, value } = e.target
+    setPasswords({ ...passwords, [name]: value })
+    validateField(name, value)
+  }
+
+  const validateField = (name: string, value: string) => {
+    let error = ""
+    switch (name) {
+      case "currentPassword":
+        if (!value) error = "Current password is required"
+        break
+      case "newPassword":
+        if (!value) {
+          error = "New password is required"
+        } else if (!passwordRegex.test(value)) {
+          error =
+            "Password must be at least 8 characters long and include uppercase, lowercase, number, and special character"
+        }
+        break
+      case "confirmNewPassword":
+        if (!value) {
+          error = "Please confirm your new password"
+        } else if (value !== passwords.newPassword) {
+          error = "Passwords do not match"
+        }
+        break
+    }
+    setErrors((prev) => ({ ...prev, [name]: error }))
+  }
+
+  const calculatePasswordStrength = (password: string) => {
+    let strength = 0
+    if (password.length >= 8) strength += 25
+    if (password.match(/[A-Z]/)) strength += 25
+    if (password.match(/[a-z]/)) strength += 25
+    if (password.match(/[0-9]/)) strength += 25
+    return strength
   }
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    setPasswords({ current: "", new: "", confirm: "" })
+    if (!currentUser) {
+      toast({
+        title: "Error",
+        description: "User not found.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    const userId = currentUser._id
+    const { currentPassword, newPassword } = passwords
+
+    Object.entries(passwords).forEach(([key, value]) => validateField(key, value))
+
+    if (Object.values(errors).some((error) => error)) {
+      toast({
+        title: "Error",
+        description: "Please correct the errors in the form.",
+        variant: "destructive",
+      })
+      return
+    }
+
+    const pwdData = {
+      password: newPassword,
+      old_password: currentPassword,
+    }
+
+    try {
+      setIsLoading(true)
+      const response = await updateUserPasswordApi(userId, pwdData)
+
+      if (response) {
+        setPasswords({
+          currentPassword: "",
+          newPassword: "",
+          confirmNewPassword: "",
+        })
+        toast({
+          title: "Success",
+          description: "Password updated successfully.",
+        })
+      } else {
+        throw new Error(response.message)
+      }
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: (error as Error).message || "An error occurred.",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const togglePasswordVisibility = (field: "current" | "new" | "confirm") => {
+    setShowPassword((prev) => ({ ...prev, [field]: !prev[field] }))
   }
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 max-w-md mx-auto">
       <h2 className="text-2xl font-bold">Change Password</h2>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div className="space-y-2">
-          <Label htmlFor="current-password">Current Password</Label>
-          <Input
-            id="current-password"
-            name="current"
-            type="password"
-            value={passwords.current}
-            onChange={handleInputChange}
-            required
-          />
+          <Label htmlFor="currentPassword">Current Password</Label>
+          <div className="relative">
+            <Input
+              id="currentPassword"
+              name="currentPassword"
+              type={showPassword.current ? "text" : "password"}
+              value={passwords.currentPassword}
+              onChange={handleInputChange}
+              required
+              aria-invalid={!!errors.currentPassword}
+              aria-describedby="currentPassword-error"
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 -translate-y-1/2"
+              onClick={() => togglePasswordVisibility("current")}
+            >
+              {showPassword.current ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </Button>
+          </div>
+          {errors.currentPassword && (
+            <p id="currentPassword-error" className="text-sm text-red-500">
+              {errors.currentPassword}
+            </p>
+          )}
         </div>
         <div className="space-y-2">
-          <Label htmlFor="new-password">New Password</Label>
-          <Input
-            id="new-password"
-            name="new"
-            type="password"
-            value={passwords.new}
-            onChange={handleInputChange}
-            required
-          />
+          <Label htmlFor="newPassword">New Password</Label>
+          <div className="relative">
+            <Input
+              id="newPassword"
+              name="newPassword"
+              type={showPassword.new ? "text" : "password"}
+              value={passwords.newPassword}
+              onChange={handleInputChange}
+              required
+              aria-invalid={!!errors.newPassword}
+              aria-describedby="newPassword-error"
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 -translate-y-1/2"
+              onClick={() => togglePasswordVisibility("new")}
+            >
+              {showPassword.new ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </Button>
+          </div>
+          {errors.newPassword && (
+            <p id="newPassword-error" className="text-sm text-red-500">
+              {errors.newPassword}
+            </p>
+          )}
+          <Progress value={calculatePasswordStrength(passwords.newPassword)} className="w-full" />
+          <p className="text-sm text-muted-foreground">
+            Password strength: {calculatePasswordStrength(passwords.newPassword)}%
+          </p>
         </div>
         <div className="space-y-2">
-          <Label htmlFor="confirm-password">Confirm New Password</Label>
-          <Input
-            id="confirm-password"
-            name="confirm"
-            type="password"
-            value={passwords.confirm}
-            onChange={handleInputChange}
-            required
-          />
+          <Label htmlFor="confirmNewPassword">Confirm New Password</Label>
+          <div className="relative">
+            <Input
+              id="confirmNewPassword"
+              name="confirmNewPassword"
+              type={showPassword.confirm ? "text" : "password"}
+              value={passwords.confirmNewPassword}
+              onChange={handleInputChange}
+              required
+              aria-invalid={!!errors.confirmNewPassword}
+              aria-describedby="confirmNewPassword-error"
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="absolute right-2 top-1/2 -translate-y-1/2"
+              onClick={() => togglePasswordVisibility("confirm")}
+            >
+              {showPassword.confirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </Button>
+          </div>
+          {errors.confirmNewPassword && (
+            <p id="confirmNewPassword-error" className="text-sm text-red-500">
+              {errors.confirmNewPassword}
+            </p>
+          )}
         </div>
-        <Button type="submit">Change Password</Button>
+        <Button type="submit" disabled={isLoading} className="w-full">
+          {isLoading ? "Changing Password..." : "Change Password"}
+        </Button>
       </form>
     </div>
   )
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index 6671f02673..f36a9a91a5 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -12,6 +12,11 @@ interface CreateClientData {
   user_id: string;
 }
 
+interface PasswordData {
+  password: string;
+  old_password: string;
+}
+
 const axiosInstance = createAxiosInstance();
 
 export const getUserClientsApi = async (userID: string): Promise<Client[]> => {
@@ -33,12 +38,9 @@ export const createClientApi = async (data: CreateClientData): Promise<Client> =
 
 export const updateUserPasswordApi = async (
   userId: string,
-  tenant: string,
-  userData: UserDetails
-): Promise<UserDetails> => {
-  return await axiosInstance.put(`${USERS_MGT_URL}/updatePassword`, userData, {
-      params: { tenant, id: userId },
-    })
+  userData: PasswordData
+): Promise<PasswordData> => {
+  return await axiosInstance.put(`${USERS_MGT_URL}/updatePassword/${userId}`, userData)
     .then((response) => response.data);
 };
 

From 71ff5a8fd9aa6940cc01891ea76caced23c62ecd Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Sun, 2 Feb 2025 10:23:24 +0300
Subject: [PATCH 21/32] Refactor updateUserPasswordApi to use query parameters
 for user ID; add Radix UI progress component for enhanced loading indicators

---
 netmanager-app/components/ui/progress.tsx | 28 +++++++++++++++++++++++
 netmanager-app/core/apis/settings.ts      |  4 +++-
 netmanager-app/package-lock.json          | 24 +++++++++++++++++++
 netmanager-app/package.json               |  1 +
 4 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 netmanager-app/components/ui/progress.tsx

diff --git a/netmanager-app/components/ui/progress.tsx b/netmanager-app/components/ui/progress.tsx
new file mode 100644
index 0000000000..5c87ea4865
--- /dev/null
+++ b/netmanager-app/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index f36a9a91a5..4dcccec61e 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -40,7 +40,9 @@ export const updateUserPasswordApi = async (
   userId: string,
   userData: PasswordData
 ): Promise<PasswordData> => {
-  return await axiosInstance.put(`${USERS_MGT_URL}/updatePassword/${userId}`, userData)
+  return await axiosInstance.put(`${USERS_MGT_URL}/updatePassword`, userData, {
+    params: { id: userId },
+  })
     .then((response) => response.data);
 };
 
diff --git a/netmanager-app/package-lock.json b/netmanager-app/package-lock.json
index 8d1a63a414..a3eb284d5b 100644
--- a/netmanager-app/package-lock.json
+++ b/netmanager-app/package-lock.json
@@ -17,6 +17,7 @@
         "@radix-ui/react-icons": "^1.3.2",
         "@radix-ui/react-label": "^2.1.1",
         "@radix-ui/react-popover": "^1.1.4",
+        "@radix-ui/react-progress": "^1.1.1",
         "@radix-ui/react-select": "^2.1.4",
         "@radix-ui/react-slot": "^1.1.1",
         "@radix-ui/react-tabs": "^1.1.2",
@@ -1062,6 +1063,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.1.tgz",
+      "integrity": "sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",
diff --git a/netmanager-app/package.json b/netmanager-app/package.json
index 998b25b59d..c059e32258 100644
--- a/netmanager-app/package.json
+++ b/netmanager-app/package.json
@@ -18,6 +18,7 @@
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.2",

From 48d88c904a1013d40bb7bbd19a32d96f6e379f5f Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Tue, 4 Feb 2025 13:02:29 +0300
Subject: [PATCH 22/32] commit

---
 netmanager-app/app/(authenticated)/profile/page.tsx             | 2 +-
 .../profile/components => components/Settings}/ApiTokens.tsx    | 0
 .../components => components/Settings}/ClientTableRow.tsx       | 0
 .../profile/components => components/Settings}/Clients.tsx      | 0
 .../components => components/Settings}/CreateClientForm.tsx     | 0
 .../components => components/Settings}/DialogWrapper.tsx        | 0
 .../components => components/Settings}/EditClientForm.tsx       | 0
 .../profile/components => components/Settings}/MyProfile.tsx    | 0
 .../profile/components => components/Settings}/PasswordEdit.tsx | 0
 .../profile/components => components/Settings}/ProfileTabs.tsx  | 0
 10 files changed, 1 insertion(+), 1 deletion(-)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/ApiTokens.tsx (100%)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/ClientTableRow.tsx (100%)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/Clients.tsx (100%)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/CreateClientForm.tsx (100%)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/DialogWrapper.tsx (100%)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/EditClientForm.tsx (100%)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/MyProfile.tsx (100%)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/PasswordEdit.tsx (100%)
 rename netmanager-app/{app/(authenticated)/profile/components => components/Settings}/ProfileTabs.tsx (100%)

diff --git a/netmanager-app/app/(authenticated)/profile/page.tsx b/netmanager-app/app/(authenticated)/profile/page.tsx
index 0266404bd8..4ae36c19d2 100644
--- a/netmanager-app/app/(authenticated)/profile/page.tsx
+++ b/netmanager-app/app/(authenticated)/profile/page.tsx
@@ -1,4 +1,4 @@
-import ProfileTabs from "./components/ProfileTabs"
+import ProfileTabs from "@/components/Settings/ProfileTabs"
 
 export default function ProfilePage() {
   return (
diff --git a/netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx b/netmanager-app/components/Settings/ApiTokens.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/ApiTokens.tsx
rename to netmanager-app/components/Settings/ApiTokens.tsx
diff --git a/netmanager-app/app/(authenticated)/profile/components/ClientTableRow.tsx b/netmanager-app/components/Settings/ClientTableRow.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/ClientTableRow.tsx
rename to netmanager-app/components/Settings/ClientTableRow.tsx
diff --git a/netmanager-app/app/(authenticated)/profile/components/Clients.tsx b/netmanager-app/components/Settings/Clients.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/Clients.tsx
rename to netmanager-app/components/Settings/Clients.tsx
diff --git a/netmanager-app/app/(authenticated)/profile/components/CreateClientForm.tsx b/netmanager-app/components/Settings/CreateClientForm.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/CreateClientForm.tsx
rename to netmanager-app/components/Settings/CreateClientForm.tsx
diff --git a/netmanager-app/app/(authenticated)/profile/components/DialogWrapper.tsx b/netmanager-app/components/Settings/DialogWrapper.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/DialogWrapper.tsx
rename to netmanager-app/components/Settings/DialogWrapper.tsx
diff --git a/netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx b/netmanager-app/components/Settings/EditClientForm.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/EditClientForm.tsx
rename to netmanager-app/components/Settings/EditClientForm.tsx
diff --git a/netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx b/netmanager-app/components/Settings/MyProfile.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/MyProfile.tsx
rename to netmanager-app/components/Settings/MyProfile.tsx
diff --git a/netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx b/netmanager-app/components/Settings/PasswordEdit.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/PasswordEdit.tsx
rename to netmanager-app/components/Settings/PasswordEdit.tsx
diff --git a/netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx b/netmanager-app/components/Settings/ProfileTabs.tsx
similarity index 100%
rename from netmanager-app/app/(authenticated)/profile/components/ProfileTabs.tsx
rename to netmanager-app/components/Settings/ProfileTabs.tsx

From 83a4cfb2274822c6f5ed6f8f25f9fd7fbdace08f Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Tue, 4 Feb 2025 13:20:44 +0300
Subject: [PATCH 23/32] Refactor token generation error handling and remove
 unnecessary toast variants for improved clarity

---
 netmanager-app/components/Settings/ApiTokens.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/netmanager-app/components/Settings/ApiTokens.tsx b/netmanager-app/components/Settings/ApiTokens.tsx
index c27e1621dc..d5569c97bf 100644
--- a/netmanager-app/components/Settings/ApiTokens.tsx
+++ b/netmanager-app/components/Settings/ApiTokens.tsx
@@ -107,6 +107,7 @@ const UserClientsTable: React.FC = () => {
     if (!res?.isActive) {
       setShowInfoModal(true)
       setIsLoadingToken(false)
+      return;
     } else {
       try {
         const response = await generateTokenApi(res)
@@ -114,15 +115,14 @@ const UserClientsTable: React.FC = () => {
           toast({
             title: "Success",
             description: "Token generated successfully",
-            variant: "success",
           })
         }
         dispatch(performRefresh())
       } catch (error: any) {
+        const errorMessage = error?.response?.data?.message || error.message || "Failed to generate token";
         toast({
           title: "Error",
-          description: error.message || "Failed to generate token",
-          variant: "destructive",
+          description: errorMessage,
         })
       } finally {
         setIsLoadingToken(false)
@@ -141,7 +141,6 @@ const UserClientsTable: React.FC = () => {
           toast({
             title: "Success",
             description: "Activation request sent successfully",
-            variant: "success",
           })
         }, 3000)
       }

From d6353496a9fe908c4617ab0bfcdb8bd9d86b130d Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 5 Feb 2025 10:33:39 +0300
Subject: [PATCH 24/32] Refactor API imports in settings components to use a
 centralized settings module

---
 .../components/Settings/ApiTokens.tsx         |  9 +-
 .../components/Settings/Clients.tsx           |  4 +-
 .../components/Settings/CreateClientForm.tsx  |  9 +-
 .../components/Settings/EditClientForm.tsx    |  6 +-
 .../components/Settings/MyProfile.tsx         |  8 +-
 .../components/Settings/PasswordEdit.tsx      |  4 +-
 netmanager-app/core/apis/settings.ts          | 86 ++++++++++---------
 7 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/netmanager-app/components/Settings/ApiTokens.tsx b/netmanager-app/components/Settings/ApiTokens.tsx
index d5569c97bf..ae23a765ed 100644
--- a/netmanager-app/components/Settings/ApiTokens.tsx
+++ b/netmanager-app/components/Settings/ApiTokens.tsx
@@ -12,9 +12,8 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { Skeleton } from "@/components/ui/skeleton"
 import { Edit, Copy, Info, Plus } from "lucide-react"
 import { users } from "@/core/apis/users"
-import { getUserClientsApi } from "@/core/apis/settings"
 import type { Client } from "@/app/types/clients"
-import { generateTokenApi, activationRequestApi } from "@/core/apis/settings"
+import { settings } from "@/core/apis/settings"
 
 const UserClientsTable: React.FC = () => {
   const dispatch = useAppDispatch()
@@ -56,7 +55,7 @@ const UserClientsTable: React.FC = () => {
   const fetchClientDetails = async () => {
     setIsLoading(true)
     try {
-      const response = await getUserClientsApi(userInfo?._id || "")
+      const response = await settings.getUserClientsApi(userInfo?._id || "")
       if (response) {
         dispatch({ type: "ADD_CLIENTS_DETAILS", payload: response })
       }
@@ -110,7 +109,7 @@ const UserClientsTable: React.FC = () => {
       return;
     } else {
       try {
-        const response = await generateTokenApi(res)
+        const response = await settings.generateTokenApi(res)
         if (response) {
           toast({
             title: "Success",
@@ -134,7 +133,7 @@ const UserClientsTable: React.FC = () => {
     setIsLoadingActivationRequest(true)
     try {
       const clientID = selectedClient?._id
-      const response = await activationRequestApi(clientID)
+      const response = await settings.activationRequestApi(clientID)
       if (response) {
         setShowInfoModal(false)
         setTimeout(() => {
diff --git a/netmanager-app/components/Settings/Clients.tsx b/netmanager-app/components/Settings/Clients.tsx
index 92848b4b66..c9a6f811b8 100644
--- a/netmanager-app/components/Settings/Clients.tsx
+++ b/netmanager-app/components/Settings/Clients.tsx
@@ -6,7 +6,7 @@ import { Input } from "@/components/ui/input"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { ActivateClientDialog, DeactivateClientDialog } from "@/components/clients/dialogs"
 import { getClientsApi } from "@/core/apis/analytics"
-import { activateUserClientApi } from "@/core/apis/settings"
+import { settings } from "@/core/apis/settings"
 import { useToast } from "@/components/ui/use-toast"
 import type { Client } from "@/app/types/clients"
 import { Search, ArrowUpDown, Loader2 } from "lucide-react"
@@ -77,7 +77,7 @@ const ClientManagement = () => {
       isActive: activate ? true : false,
     };
     try {
-      await activateUserClientApi(data)
+      await settings.activateUserClientApi(data)
       await fetchClients()
       toast({
         title: "Success",
diff --git a/netmanager-app/components/Settings/CreateClientForm.tsx b/netmanager-app/components/Settings/CreateClientForm.tsx
index f9546c8777..2946705286 100644
--- a/netmanager-app/components/Settings/CreateClientForm.tsx
+++ b/netmanager-app/components/Settings/CreateClientForm.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
-import { useAppDispatch, useAppSelector } from "@/core/redux/hooks"
+import {  useAppSelector } from "@/core/redux/hooks"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Plus, X } from 'lucide-react'
-import { createClientApi } from "@/core/apis/settings"
-import { Client } from "@/app/types/clients"
+import { settings } from "@/core/apis/settings"
 import { useToast } from "@/components/ui/use-toast"
 
 interface CreateClientFormProps {
@@ -16,7 +15,6 @@ interface CreateClientFormProps {
 }
 
 const CreateClientForm: React.FC<CreateClientFormProps> = ({ open, onClose, onClientCreated }) => {
-  const dispatch = useAppDispatch()
   const { toast } = useToast()
   const userInfo = useAppSelector((state) => state.user.userDetails)
   const [clientName, setClientName] = useState('')
@@ -55,12 +53,11 @@ const CreateClientForm: React.FC<CreateClientFormProps> = ({ open, onClose, onCl
         ip_addresses: ipAddresses.filter((ip) => ip.trim() !== ''),
       }
 
-      const response = await createClientApi(data)
+      const response = await settings.createClientApi(data)
       if (response) {
         toast({
           title: "Success",
           description: "Client created successfully",
-          variant: "success",
         })
         onClientCreated()
         onClose()
diff --git a/netmanager-app/components/Settings/EditClientForm.tsx b/netmanager-app/components/Settings/EditClientForm.tsx
index 2c9452e668..236b87a0bd 100644
--- a/netmanager-app/components/Settings/EditClientForm.tsx
+++ b/netmanager-app/components/Settings/EditClientForm.tsx
@@ -10,7 +10,7 @@ import { X, Plus } from "lucide-react"
 import { users } from "@/core/apis/users"
 import type { RootState } from "@/core/redux/store"
 import { Client } from "@/app/types/clients"
-import { getUserClientsApi, updateClientApi } from "@/core/apis/settings"
+import { settings } from "@/core/apis/settings"
 
 interface EditClientFormProps {
   open: boolean
@@ -85,12 +85,12 @@ const EditClientForm: React.FC<EditClientFormProps> = ({ open, onClose, data })
         ip_addresses: ipAddresses.filter((ip) => ip.trim() !== ""),
       }
 
-      const response = await updateClientApi(data, clientID)
+      const response = await settings.updateClientApi(data, clientID)
       if (!response) {
         throw new Error("Failed to update client")
       }
       const res = await users.getUserDetails(userInfo?._id || "")
-      const resp = await getUserClientsApi(userInfo?._id || "")
+      const resp = await settings.getUserClientsApi(userInfo?._id || "")
       dispatch(addClients(res.users[0].clients))
       dispatch(addClientsDetails(resp.clients))
       dispatch(performRefresh())
diff --git a/netmanager-app/components/Settings/MyProfile.tsx b/netmanager-app/components/Settings/MyProfile.tsx
index 460345bf3d..05f1436b63 100644
--- a/netmanager-app/components/Settings/MyProfile.tsx
+++ b/netmanager-app/components/Settings/MyProfile.tsx
@@ -6,7 +6,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Textarea } from "@/components/ui/textarea"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { updateUserDetailsApi } from "@/core/apis/settings"
+import { settings } from "@/core/apis/settings"
 import { Avatar, AvatarImage } from "@/components/ui/avatar"
 import { getCountries } from "@/utils/countries"
 import { getTimezones } from "@/utils/timezones"
@@ -112,7 +112,7 @@ export default function MyProfile() {
       if (profile && currentUser) {
         const updatedProfile = { ...profile, profilePicture: responseData.secure_url }
         setProfile(updatedProfile)
-        await updateUserDetailsApi({ profilePicture: responseData.secure_url }, currentUser._id)
+        await settings.updateUserDetailsApi({ profilePicture: responseData.secure_url }, currentUser._id)
         dispatch(setUserDetails({ ...currentUser, profilePicture: responseData.secure_url }))
         toast({
           title: "Success",
@@ -135,7 +135,7 @@ export default function MyProfile() {
     try {
       const updatedProfile = { ...profile, profilePicture: "" }
       setProfile(updatedProfile)
-      await updateUserDetailsApi({ profilePicture: "" }, currentUser._id)
+      await settings.updateUserDetailsApi({ profilePicture: "" }, currentUser._id)
       dispatch(setUserDetails({ ...currentUser, profilePicture: "" }))
       toast({
         title: "Success",
@@ -155,7 +155,7 @@ export default function MyProfile() {
 
     setIsLoading(true)
     try {
-      await updateUserDetailsApi(profile, currentUser._id)
+      await settings.updateUserDetailsApi(profile, currentUser._id)
       const res = await users.getUserDetails(currentUser._id)
       const updatedUser = res.users[0]
 
diff --git a/netmanager-app/components/Settings/PasswordEdit.tsx b/netmanager-app/components/Settings/PasswordEdit.tsx
index 881be832fc..acaaddebb8 100644
--- a/netmanager-app/components/Settings/PasswordEdit.tsx
+++ b/netmanager-app/components/Settings/PasswordEdit.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { useAppSelector } from "@/core/redux/hooks"
-import { updateUserPasswordApi } from "@/core/apis/settings"
+import { settings } from "@/core/apis/settings"
 import { useToast } from "@/components/ui/use-toast"
 import { Progress } from "@/components/ui/progress"
 import { Eye, EyeOff } from "lucide-react"
@@ -106,7 +106,7 @@ export default function PasswordEdit() {
 
     try {
       setIsLoading(true)
-      const response = await updateUserPasswordApi(userId, pwdData)
+      const response = await settings.updateUserPasswordApi(userId, pwdData)
 
       if (response) {
         setPasswords({
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index 4dcccec61e..ec39c77dc1 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -19,7 +19,8 @@ interface PasswordData {
 
 const axiosInstance = createAxiosInstance();
 
-export const getUserClientsApi = async (userID: string): Promise<Client[]> => {
+export const settings = {
+  getUserClientsApi: async (userID: string): Promise<Client[]> => {
     try {
       const response = await axiosInstance.get<Client[]>(`${USERS_MGT_URL}/clients`, {
         params: { user_id: userID },
@@ -29,53 +30,54 @@ export const getUserClientsApi = async (userID: string): Promise<Client[]> => {
       console.error("Error fetching clients:", error);
       throw error;
     }
-};
+  },
 
-export const createClientApi = async (data: CreateClientData): Promise<Client> => {
-  return await axiosInstance.post<CreateClientData, AxiosResponse<Client>>(`${USERS_MGT_URL}/clients`, data)
-    .then((response) => response.data);
-};
+  createClientApi: async (data: CreateClientData): Promise<Client> => {
+    return await axiosInstance.post<CreateClientData, AxiosResponse<Client>>(`${USERS_MGT_URL}/clients`, data)
+      .then((response) => response.data);
+  },
 
-export const updateUserPasswordApi = async (
-  userId: string,
-  userData: PasswordData
-): Promise<PasswordData> => {
-  return await axiosInstance.put(`${USERS_MGT_URL}/updatePassword`, userData, {
-    params: { id: userId },
-  })
-    .then((response) => response.data);
-};
+  updateUserPasswordApi: async (
+    userId: string,
+    userData: PasswordData
+  ): Promise<PasswordData> => {
+    return await axiosInstance.put(`${USERS_MGT_URL}/updatePassword`, userData, {
+      params: { id: userId },
+    })
+      .then((response) => response.data);
+  },
 
+  updateClientApi: async (
+    data: CreateClientData,
+    client_id: string
+  ): Promise<Client> => {
+    return await axiosInstance.put(`${USERS_MGT_URL}/clients/${client_id}`, data)
+      .then((response) => response.data);
+  },
 
-export const updateClientApi = async (
-  data: CreateClientData,
-  client_id: string
-): Promise<Client> => {
-  return await axiosInstance.put(`${USERS_MGT_URL}/clients/${client_id}`, data)
-    .then((response) => response.data);
-};
+  generateTokenApi: async (data: Client): Promise<Client> => {
+    const response = await axiosInstance.post(`${USERS_MGT_URL}/token`, data);
+    return response.data;
+  },
 
-export const generateTokenApi = async (data: Client): Promise<Client> => {
-  const response = await axiosInstance.post(`${USERS_MGT_URL}/token`, data);
-  return response.data;
-};
 
-export const getClientsApi = async () => {
-  return axiosInstance.get(`${USERS_MGT_URL}/clients`).then((response) => response.data);
-};
+  getClientsApi: async () => {
+    return axiosInstance.get(`${USERS_MGT_URL}/clients`).then((response) => response.data);
+  },
 
-export const activateUserClientApi = async (data: { _id: string; isActive: boolean }) => {
-  return axiosInstance
-    .post(`${USERS_MGT_URL}/clients/activate/${data._id}`, data)
-    .then((response) => response.data);
-};
+  activateUserClientApi: async (data: { _id: string; isActive: boolean }) => {
+    return axiosInstance
+      .post(`${USERS_MGT_URL}/clients/activate/${data._id}`, data)
+      .then((response) => response.data);
+  },
 
-export const activationRequestApi = async (clientID: string): Promise<Client> => {
-  return await axiosInstance.get(`${USERS_MGT_URL}/clients/activate-request/${clientID}`)
-    .then((response) => response.data);
-};
+  activationRequestApi: async (clientID: string): Promise<Client> => {
+    return await axiosInstance.get(`${USERS_MGT_URL}/clients/activate-request/${clientID}`)
+      .then((response) => response.data);
+  },
 
-export const updateUserDetailsApi = async (data: any, userID: string): Promise<UserDetails> => {
-  return await axiosInstance.put(`${USERS_MGT_URL}/${userID}`, data)
-    .then((response) => response.data);
-}
\ No newline at end of file
+  updateUserDetailsApi: async (data: any, userID: string): Promise<UserDetails> => {
+    return await axiosInstance.put(`${USERS_MGT_URL}/${userID}`, data)
+      .then((response) => response.data);
+  }
+}

From 041bafd7a702816fe1ba0f75353c417ad5a68549 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 5 Feb 2025 10:41:26 +0300
Subject: [PATCH 25/32] Rename "Password Edit" tab to "Reset Password" for
 improved clarity

---
 netmanager-app/components/Settings/ProfileTabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/netmanager-app/components/Settings/ProfileTabs.tsx b/netmanager-app/components/Settings/ProfileTabs.tsx
index bec5206278..42f25b863a 100644
--- a/netmanager-app/components/Settings/ProfileTabs.tsx
+++ b/netmanager-app/components/Settings/ProfileTabs.tsx
@@ -18,7 +18,7 @@ export default function ProfileTabs() {
     <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
       <TabsList className={`grid w-full ${canManageClients ? "grid-cols-4" : "grid-cols-3"}`}>
         <TabsTrigger value="profile">My Profile</TabsTrigger>
-        <TabsTrigger value="password">Password Edit</TabsTrigger>
+        <TabsTrigger value="password">Reset Password</TabsTrigger>
         <TabsTrigger value="api">API Access Tokens</TabsTrigger>
         {canManageClients && <TabsTrigger value="clients">Clients</TabsTrigger>}
       </TabsList>

From 84907a31295414269a482e23452df63ed4d2239f Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 5 Feb 2025 11:27:24 +0300
Subject: [PATCH 26/32] Refactor token generation and retrieval logic for
 improved error handling and clarity

---
 .../app/(authenticated)/clients/page.tsx      | 290 ------------------
 .../components/Settings/ApiTokens.tsx         |  46 ++-
 netmanager-app/core/apis/settings.ts          |   4 +-
 3 files changed, 33 insertions(+), 307 deletions(-)
 delete mode 100644 netmanager-app/app/(authenticated)/clients/page.tsx

diff --git a/netmanager-app/app/(authenticated)/clients/page.tsx b/netmanager-app/app/(authenticated)/clients/page.tsx
deleted file mode 100644
index 224632669a..0000000000
--- a/netmanager-app/app/(authenticated)/clients/page.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { ActivateClientDialog, DeactivateClientDialog } from "../../../components/clients/dialogs"
-import { getClientsApi, activateUserClientApi } from "@/core/apis/analytics"
-import { useToast } from "@/components/ui/use-toast"
-import type { Client } from "@/app/types/clients"
-import { Search, ArrowUpDown, Loader2 } from "lucide-react"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination"
-
-const ITEMS_PER_PAGE = 8
-
-const formatDate = (dateString: string | undefined): string => {
-  if (!dateString) return "N/A"
-  const date = new Date(dateString)
-  if (isNaN(date.getTime())) return "Invalid Date"
-
-  const now = new Date()
-  const diffTime = date.getTime() - now.getTime()
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-
-  if (diffDays < 0) return "Expired"
-  if (diffDays === 0) return "Expires today"
-  if (diffDays === 1) return "Expires tomorrow"
-  return `Expires in ${diffDays} days`
-}
-
-
-const ClientManagement = () => {
-  const [clients, setClients] = useState<Client[]>([])
-  const [loading, setLoading] = useState(false)
-  const [selectedClient, setSelectedClient] = useState<Client | null>(null)
-  const [activateDialogOpen, setActivateDialogOpen] = useState(false)
-  const [deactivateDialogOpen, setDeactivateDialogOpen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState("")
-  const [currentPage, setCurrentPage] = useState(1)
-  const [sortField, setSortField] = useState<keyof Client>("name")
-  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")
-  const { toast } = useToast()
-
-  const fetchClients = async () => {
-    setLoading(true)
-    try {
-      const response = await getClientsApi()
-      setClients(response.clients)
-    } catch (error) {
-      toast({
-        title: "Error",
-        description: "Failed to fetch clients",
-        variant: "destructive",
-      })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleCopyClientId = (clientId: string) => {
-    navigator.clipboard.writeText(clientId)
-    toast({
-      title: "Client ID Copied",
-      description: "The client ID has been copied to your clipboard.",
-    })
-  }
-
-  useEffect(() => {
-    fetchClients()
-  }, [])
-
-  const handleActivateDeactivate = async (clientId: string, activate: boolean) => {
-    try {
-      await activateUserClientApi({ _id: clientId, isActive: activate })
-      await fetchClients()
-      toast({
-        title: "Success",
-        description: `Client ${activate ? "activated" : "deactivated"} successfully`,
-      })
-    } catch (error) {
-      toast({
-        title: "Error",
-        description: `Failed to ${activate ? "activate" : "deactivate"} client`,
-        variant: "destructive",
-      })
-    } finally {
-      setActivateDialogOpen(false)
-      setDeactivateDialogOpen(false)
-      setSelectedClient(null)
-    }
-  }
-
-  const handleActivateClick = (client: Client) => {
-    setSelectedClient(client)
-    setActivateDialogOpen(true)
-  }
-
-  const handleDeactivateClick = (client: Client) => {
-    setSelectedClient(client)
-    setDeactivateDialogOpen(true)
-  }
-
-  const handleSort = (field: keyof Client) => {
-    if (sortField === field) {
-      setSortOrder(sortOrder === "asc" ? "desc" : "asc")
-    } else {
-      setSortField(field)
-      setSortOrder("asc")
-    }
-  }
-
-  const filteredClients = clients.filter(
-    (client) =>
-      client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      client.user.email.toLowerCase().includes(searchQuery.toLowerCase()),
-  )
-
-  const sortedClients = [...filteredClients].sort((a, b) => {
-    if (a[sortField] < b[sortField]) return sortOrder === "asc" ? -1 : 1
-    if (a[sortField] > b[sortField]) return sortOrder === "asc" ? 1 : -1
-    return 0
-  })
-
-  const totalPages = Math.ceil(sortedClients.length / ITEMS_PER_PAGE)
-  const paginatedClients = sortedClients.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
-
-  const activatedClients = clients.filter((client) => client.isActive).length
-  const deactivatedClients = clients.filter((client) => !client.isActive).length
-
-
-
-  return (
-    <div className="container mx-auto py-10">
-      {loading ? (
-        <div className="flex justify-center items-center h-64">
-          <Loader2 className="h-8 w-8 animate-spin" />
-        </div>
-      ) : (
-        <>
-          <div className="flex justify-between items-center mb-6">
-            <h1 className="text-3xl font-bold">Client Management</h1>
-            <Button onClick={fetchClients}>Refresh</Button>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4 mb-6">
-            <div className="bg-green-100 p-4 rounded-lg">
-              <h2 className="text-lg font-semibold">Activated Clients</h2>
-              <p className="text-3xl font-bold">{activatedClients}</p>
-            </div>
-            <div className="bg-red-100 p-4 rounded-lg">
-              <h2 className="text-lg font-semibold">Deactivated Clients</h2>
-              <p className="text-3xl font-bold">{deactivatedClients}</p>
-            </div>
-
-          </div>
-
-          <div className="flex items-center gap-2 mb-4">
-            <div className="relative flex-1 max-w-sm">
-              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Search clients..."
-                className="pl-8"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-              />
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="ml-2">
-                  Sort by <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={() => handleSort("name")}>
-                  Name {sortField === "name" && (sortOrder === "asc" ? "↑" : "↓")}
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleSort("isActive")}>
-                  Status {sortField === "isActive" && (sortOrder === "asc" ? "↑" : "↓")}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </div>
-
-          <div className="rounded-md border">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-[250px]">Client Name</TableHead>
-                  <TableHead>User Email</TableHead>
-                  <TableHead>Token Expiry</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead className="text-right">Actions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {paginatedClients.map((client) => (
-                  <TableRow key={client._id}>
-                    <TableCell>
-                      <div className="font-medium">{client.name}</div>
-                      <div className="text-sm text-muted-foreground">{client._id}</div>
-                    </TableCell>
-                    <TableCell>{client.user.email}</TableCell>
-                    <TableCell>
-                      {client.access_token?.expires 
-                        ? formatDate(client.access_token.expires) 
-                        : "N/A"}
-                    </TableCell>
-                    <TableCell>
-                      <span
-                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                            client.isActive
-                              ? "bg-green-100 text-green-800"
-                              : "bg-red-100 text-red-800"
-                          }`}
-                      >
-                        {client.isActive ? "Activated" : "Not Activated"}
-                      </span>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <Button
-                        variant="ghost"
-                        onClick={() => (client.isActive ? handleDeactivateClick(client) : handleActivateClick(client))}
-                      >
-                        {client.isActive ? "Deactivate" : "Activate"}
-                      </Button>
-                      <Button variant="ghost" onClick={() => handleCopyClientId(client._id)}>
-                        Copy ID
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          <div className="mt-4 flex justify-center">
-            <Pagination>
-              <PaginationContent>
-                <PaginationItem>
-                  <PaginationPrevious
-                    onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-                    className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
-                  />
-                </PaginationItem>
-                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-                  <PaginationItem key={page}>
-                    <PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
-                      {page}
-                    </PaginationLink>
-                  </PaginationItem>
-                ))}
-                <PaginationItem>
-                  <PaginationNext
-                    onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
-                    className={currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
-                  />
-                </PaginationItem>
-              </PaginationContent>
-            </Pagination>
-          </div>
-
-          <ActivateClientDialog
-            open={activateDialogOpen}
-            onOpenChange={setActivateDialogOpen}
-            onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, true)}
-            clientName={selectedClient?.name}
-          />
-
-          <DeactivateClientDialog
-            open={deactivateDialogOpen}
-            onOpenChange={setDeactivateDialogOpen}
-            onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, false)}
-            clientName={selectedClient?.name}
-          />
-        </>
-      )}
-    </div>
-  )
-}
-
-export default ClientManagement
-
diff --git a/netmanager-app/components/Settings/ApiTokens.tsx b/netmanager-app/components/Settings/ApiTokens.tsx
index ae23a765ed..de2d52d192 100644
--- a/netmanager-app/components/Settings/ApiTokens.tsx
+++ b/netmanager-app/components/Settings/ApiTokens.tsx
@@ -15,6 +15,7 @@ import { users } from "@/core/apis/users"
 import type { Client } from "@/app/types/clients"
 import { settings } from "@/core/apis/settings"
 
+
 const UserClientsTable: React.FC = () => {
   const dispatch = useAppDispatch()
   const { toast } = useToast()
@@ -56,6 +57,7 @@ const UserClientsTable: React.FC = () => {
     setIsLoading(true)
     try {
       const response = await settings.getUserClientsApi(userInfo?._id || "")
+      console.log(response)
       if (response) {
         dispatch({ type: "ADD_CLIENTS_DETAILS", payload: response })
       }
@@ -85,12 +87,21 @@ const UserClientsTable: React.FC = () => {
     return client && client.access_token
   }
 
-  const getClientToken = (clientID: string) => {
-    const client =
-      Array.isArray(clientsDetails) && clientsDetails
-        ? clientsDetails?.find((client: Client) => client._id === clientID)
-        : undefined
-    return client && client.access_token && client.access_token.token
+  const getClientToken = async (clientID: string) => {
+    try {
+      const response = await settings.getUserClientsApi(userInfo?._id || "")
+      if (response) { 
+        const client = response.find((client: Client) => client._id === clientID);
+        return client?.access_token?.token;
+      }
+    } catch (error) {
+      console.error(error);
+      toast({
+        title: "Error",
+        description: "Failed to fetch client token",
+        variant: "destructive",
+      });
+    }
   }
 
   const getClientTokenExpiryDate = (clientID: string) => {
@@ -215,24 +226,27 @@ const UserClientsTable: React.FC = () => {
                       : "N/A"}
                   </TableCell>
                   <TableCell>
-                    {getClientToken(client._id) ? (
+                    {hasAccessToken(client._id) ? (
                       <div className="flex items-center">
                         <span className="mr-2 font-mono">
-                          {getClientToken(client._id).slice(0, 4)}
+                          {client.access_token?.token.slice(0, 4)}
                           <span className="mx-1">•••••••</span>
-                          {getClientToken(client._id).slice(-4)}
+                          {client.access_token?.token.slice(-4)}
                         </span>
                         <Button
                           title="Copy full token"
                           variant="ghost"
                           size="sm"
-                          onClick={() => {
-                            navigator.clipboard.writeText(getClientToken(client._id))
-                            toast({
-                              title: "Success",
-                              description: "API token copied to clipboard",
-                              variant: "success",
-                            })
+                          onClick={async () => {
+                            const token = await getClientToken(client._id)
+                            if (token) {
+                              navigator.clipboard.writeText(token)
+                              toast({
+                                title: "Success",
+                                description: "API token copied to clipboard",
+                                variant: "default",
+                              })
+                            }
                           }}
                         >
                           <Copy className="h-4 w-4" />
diff --git a/netmanager-app/core/apis/settings.ts b/netmanager-app/core/apis/settings.ts
index ec39c77dc1..3f6c3a13a4 100644
--- a/netmanager-app/core/apis/settings.ts
+++ b/netmanager-app/core/apis/settings.ts
@@ -56,7 +56,9 @@ export const settings = {
   },
 
   generateTokenApi: async (data: Client): Promise<Client> => {
-    const response = await axiosInstance.post(`${USERS_MGT_URL}/token`, data);
+    const client_id = data._id
+    const formData = { client_id, name: data.name }
+    const response = await axiosInstance.post(`${USERS_MGT_URL}/tokens`, formData);
     return response.data;
   },
 

From bb70faf19e5ee49f57e606133c20712b1e8f326d Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 5 Feb 2025 11:31:59 +0300
Subject: [PATCH 27/32] fix pagination

---
 .../components/Settings/Clients.tsx           | 311 ++++++++++++------
 1 file changed, 203 insertions(+), 108 deletions(-)

diff --git a/netmanager-app/components/Settings/Clients.tsx b/netmanager-app/components/Settings/Clients.tsx
index c9a6f811b8..aca3037804 100644
--- a/netmanager-app/components/Settings/Clients.tsx
+++ b/netmanager-app/components/Settings/Clients.tsx
@@ -1,140 +1,196 @@
-"use client"
+"use client";
 
-import { useState, useEffect } from "react"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { ActivateClientDialog, DeactivateClientDialog } from "@/components/clients/dialogs"
-import { getClientsApi } from "@/core/apis/analytics"
-import { settings } from "@/core/apis/settings"
-import { useToast } from "@/components/ui/use-toast"
-import type { Client } from "@/app/types/clients"
-import { Search, ArrowUpDown, Loader2 } from "lucide-react"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  ActivateClientDialog,
+  DeactivateClientDialog,
+} from "@/components/clients/dialogs";
+import { getClientsApi } from "@/core/apis/analytics";
+import { settings } from "@/core/apis/settings";
+import { useToast } from "@/components/ui/use-toast";
+import type { Client } from "@/app/types/clients";
+import { Search, ArrowUpDown, Loader2 } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Pagination,
   PaginationContent,
+  PaginationEllipsis,
   PaginationItem,
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/pagination"
+} from "@/components/ui/pagination";
 
-const ITEMS_PER_PAGE = 8
+const ITEMS_PER_PAGE = 8;
 
 const formatDate = (dateString: string | undefined): string => {
-  if (!dateString) return "N/A"
-  const date = new Date(dateString)
-  if (isNaN(date.getTime())) return "Invalid Date"
+  if (!dateString) return "N/A";
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return "Invalid Date";
 
-  const now = new Date()
-  const diffTime = date.getTime() - now.getTime()
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-
-  if (diffDays < 0) return "Expired"
-  if (diffDays === 0) return "Expires today"
-  if (diffDays === 1) return "Expires tomorrow"
-  return `Expires in ${diffDays} days`
-}
+  const now = new Date();
+  const diffTime = date.getTime() - now.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
 
+  if (diffDays < 0) return "Expired";
+  if (diffDays === 0) return "Expires today";
+  if (diffDays === 1) return "Expires tomorrow";
+  return `Expires in ${diffDays} days`;
+};
 
 const ClientManagement = () => {
-  const [clients, setClients] = useState<Client[]>([])
-  const [loading, setLoading] = useState(false)
-  const [selectedClient, setSelectedClient] = useState<Client | null>(null)
-  const [activateDialogOpen, setActivateDialogOpen] = useState(false)
-  const [deactivateDialogOpen, setDeactivateDialogOpen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState("")
-  const [currentPage, setCurrentPage] = useState(1)
-  const [sortField, setSortField] = useState<keyof Client>("name")
-  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc")
-  const { toast } = useToast()
+  const [clients, setClients] = useState<Client[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedClient, setSelectedClient] = useState<Client | null>(null);
+  const [activateDialogOpen, setActivateDialogOpen] = useState(false);
+  const [deactivateDialogOpen, setDeactivateDialogOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [sortField, setSortField] = useState<keyof Client>("name");
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+  const { toast } = useToast();
 
   const fetchClients = async () => {
-    setLoading(true)
+    setLoading(true);
     try {
-      const response = await getClientsApi()
-      setClients(response.clients)
+      const response = await getClientsApi();
+      setClients(response.clients);
     } catch (error) {
       toast({
         title: "Error",
         description: "Failed to fetch clients",
         variant: "destructive",
-      })
+      });
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
-
+  };
 
   useEffect(() => {
-    fetchClients()
-  }, [])
+    fetchClients();
+  }, []);
 
-  const handleActivateDeactivate = async (clientId: string, activate: boolean) => {
+  const handleActivateDeactivate = async (
+    clientId: string,
+    activate: boolean
+  ) => {
     const data = {
       _id: clientId,
       isActive: activate ? true : false,
     };
     try {
-      await settings.activateUserClientApi(data)
-      await fetchClients()
+      await settings.activateUserClientApi(data);
+      await fetchClients();
       toast({
         title: "Success",
-        description: `Client ${activate ? "activated" : "deactivated"} successfully`,
-      })
+        description: `Client ${
+          activate ? "activated" : "deactivated"
+        } successfully`,
+      });
     } catch (error) {
       toast({
         title: "Error",
         description: `Failed to ${activate ? "activate" : "deactivate"} client`,
         variant: "destructive",
-      })
+      });
     } finally {
-      setActivateDialogOpen(false)
-      setDeactivateDialogOpen(false)
-      setSelectedClient(null)
+      setActivateDialogOpen(false);
+      setDeactivateDialogOpen(false);
+      setSelectedClient(null);
     }
-  }
+  };
 
   const handleActivateClick = (client: Client) => {
-    setSelectedClient(client)
-    setActivateDialogOpen(true)
-  }
+    setSelectedClient(client);
+    setActivateDialogOpen(true);
+  };
 
   const handleDeactivateClick = (client: Client) => {
-    setSelectedClient(client)
-    setDeactivateDialogOpen(true)
-  }
+    setSelectedClient(client);
+    setDeactivateDialogOpen(true);
+  };
 
   const handleSort = (field: keyof Client) => {
     if (sortField === field) {
-      setSortOrder(sortOrder === "asc" ? "desc" : "asc")
+      setSortOrder(sortOrder === "asc" ? "desc" : "asc");
     } else {
-      setSortField(field)
-      setSortOrder("asc")
+      setSortField(field);
+      setSortOrder("asc");
     }
-  }
+  };
 
   const filteredClients = clients.filter(
     (client) =>
       client.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      (client.user?.email?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false)
-  )
-
+      (client.user?.email?.toLowerCase().includes(searchQuery.toLowerCase()) ??
+        false)
+  );
 
   const sortedClients = [...filteredClients].sort((a, b) => {
-    if (a[sortField] < b[sortField]) return sortOrder === "asc" ? -1 : 1
-    if (a[sortField] > b[sortField]) return sortOrder === "asc" ? 1 : -1
-    return 0
-  })
-
-  const totalPages = Math.ceil(sortedClients.length / ITEMS_PER_PAGE)
-  const paginatedClients = sortedClients.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE)
-
-  const activatedClients = clients.filter((client) => client.isActive).length
-  const deactivatedClients = clients.filter((client) => !client.isActive).length
-
-
+    if (a[sortField] < b[sortField]) return sortOrder === "asc" ? -1 : 1;
+    if (a[sortField] > b[sortField]) return sortOrder === "asc" ? 1 : -1;
+    return 0;
+  });
+
+  const totalPages = Math.ceil(sortedClients.length / ITEMS_PER_PAGE);
+  const paginatedClients = sortedClients.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  const activatedClients = clients.filter((client) => client.isActive).length;
+  const deactivatedClients = clients.filter(
+    (client) => !client.isActive
+  ).length;
+
+  const getPageNumbers = () => {
+    const pageNumbers = [];
+    const maxVisiblePages = 5;
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pageNumbers.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= 4; i++) {
+          pageNumbers.push(i);
+        }
+        pageNumbers.push("ellipsis");
+        pageNumbers.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        pageNumbers.push(1);
+        pageNumbers.push("ellipsis");
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pageNumbers.push(i);
+        }
+      } else {
+        pageNumbers.push(1);
+        pageNumbers.push("ellipsis");
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pageNumbers.push(i);
+        }
+        pageNumbers.push("ellipsis");
+        pageNumbers.push(totalPages);
+      }
+    }
+    return pageNumbers;
+  };
 
   return (
     <div className=" py-2">
@@ -158,7 +214,6 @@ const ClientManagement = () => {
               <h2 className="text-md font-semibold">Deactivated Clients</h2>
               <p className="text-lg font-semibold">{deactivatedClients}</p>
             </div>
-
           </div>
 
           <div className="flex items-center gap-2 mb-4">
@@ -179,10 +234,13 @@ const ClientManagement = () => {
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
                 <DropdownMenuItem onClick={() => handleSort("name")}>
-                  Name {sortField === "name" && (sortOrder === "asc" ? "↑" : "↓")}
+                  Name{" "}
+                  {sortField === "name" && (sortOrder === "asc" ? "↑" : "↓")}
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={() => handleSort("isActive")}>
-                  Status {sortField === "isActive" && (sortOrder === "asc" ? "↑" : "↓")}
+                  Status{" "}
+                  {sortField === "isActive" &&
+                    (sortOrder === "asc" ? "↑" : "↓")}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -204,22 +262,28 @@ const ClientManagement = () => {
                   <TableRow key={client._id}>
                     <TableCell>
                       <div className="font-medium">{client.name}</div>
-                      <div className="text-sm text-muted-foreground">{client._id}</div>
+                      <div className="text-sm text-muted-foreground">
+                        {client._id}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      {client.user && client.user.email
+                        ? client.user.email
+                        : "N/A"}
                     </TableCell>
-                    <TableCell>{client.user && client.user.email ? client.user.email : "N/A"}</TableCell>
 
                     <TableCell>
-                      {client.access_token?.expires 
-                        ? formatDate(client.access_token.expires) 
+                      {client.access_token?.expires
+                        ? formatDate(client.access_token.expires)
                         : "N/A"}
                     </TableCell>
                     <TableCell>
                       <span
-                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                            client.isActive
-                              ? "bg-green-100 text-green-800"
-                              : "bg-red-100 text-red-800"
-                          }`}
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                          client.isActive
+                            ? "bg-green-100 text-green-800"
+                            : "bg-red-100 text-red-800"
+                        }`}
                       >
                         {client.isActive ? "Activated" : "Not Activated"}
                       </span>
@@ -227,7 +291,11 @@ const ClientManagement = () => {
                     <TableCell className="text-right">
                       <Button
                         variant="ghost"
-                        onClick={() => (client.isActive ? handleDeactivateClick(client) : handleActivateClick(client))}
+                        onClick={() =>
+                          client.isActive
+                            ? handleDeactivateClick(client)
+                            : handleActivateClick(client)
+                        }
                       >
                         {client.isActive ? "Deactivate" : "Activate"}
                       </Button>
@@ -243,21 +311,43 @@ const ClientManagement = () => {
               <PaginationContent>
                 <PaginationItem>
                   <PaginationPrevious
-                    onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-                    className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                    onClick={() =>
+                      setCurrentPage((prev) => Math.max(prev - 1, 1))
+                    }
+                    className={
+                      currentPage === 1
+                        ? "pointer-events-none opacity-50"
+                        : "cursor-pointer"
+                    }
                   />
                 </PaginationItem>
-                {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
-                  <PaginationItem key={page}>
-                    <PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
-                      {page}
-                    </PaginationLink>
+
+                {getPageNumbers().map((pageNumber, index) => (
+                  <PaginationItem key={index}>
+                    {pageNumber === "ellipsis" ? (
+                      <PaginationEllipsis />
+                    ) : (
+                      <PaginationLink
+                        onClick={() => setCurrentPage(pageNumber as number)}
+                        isActive={currentPage === pageNumber}
+                        className="cursor-pointer"
+                      >
+                        {pageNumber}
+                      </PaginationLink>
+                    )}
                   </PaginationItem>
                 ))}
+
                 <PaginationItem>
                   <PaginationNext
-                    onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
-                    className={currentPage === totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                    onClick={() =>
+                      setCurrentPage((prev) => Math.min(prev + 1, totalPages))
+                    }
+                    className={
+                      currentPage === totalPages
+                        ? "pointer-events-none opacity-50"
+                        : "cursor-pointer"
+                    }
                   />
                 </PaginationItem>
               </PaginationContent>
@@ -267,21 +357,26 @@ const ClientManagement = () => {
           <ActivateClientDialog
             open={activateDialogOpen}
             onOpenChange={setActivateDialogOpen}
-            onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, true)}
+            onConfirm={() =>
+              selectedClient &&
+              handleActivateDeactivate(selectedClient._id, true)
+            }
             clientName={selectedClient?.name}
           />
 
           <DeactivateClientDialog
             open={deactivateDialogOpen}
             onOpenChange={setDeactivateDialogOpen}
-            onConfirm={() => selectedClient && handleActivateDeactivate(selectedClient._id, false)}
+            onConfirm={() =>
+              selectedClient &&
+              handleActivateDeactivate(selectedClient._id, false)
+            }
             clientName={selectedClient?.name}
           />
         </>
       )}
     </div>
-  )
-}
-
-export default ClientManagement
+  );
+};
 
+export default ClientManagement;

From 9887f725b7c54bde6113149fa4a3276aacedd49d Mon Sep 17 00:00:00 2001
From: Belinda Marion Kobusingye <46527380+Codebmk@users.noreply.github.com>
Date: Wed, 5 Feb 2025 11:38:38 +0300
Subject: [PATCH 28/32] fix update button

---
 .../components/Settings/MyProfile.tsx         | 308 +++++++++++-------
 1 file changed, 192 insertions(+), 116 deletions(-)

diff --git a/netmanager-app/components/Settings/MyProfile.tsx b/netmanager-app/components/Settings/MyProfile.tsx
index 05f1436b63..966f11e48f 100644
--- a/netmanager-app/components/Settings/MyProfile.tsx
+++ b/netmanager-app/components/Settings/MyProfile.tsx
@@ -1,55 +1,65 @@
-"use client"
+"use client";
 
-import { useState, useEffect, useCallback } from "react"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { settings } from "@/core/apis/settings"
-import { Avatar, AvatarImage } from "@/components/ui/avatar"
-import { getCountries } from "@/utils/countries"
-import { getTimezones } from "@/utils/timezones"
-import { users } from "@/core/apis/users"
-import { useAppSelector, useAppDispatch } from "@/core/redux/hooks"
-import { useToast } from "@/components/ui/use-toast"
-import { Toaster } from "@/components/ui/toaster"
-import { Loader2, Upload, Trash2 } from "lucide-react"
-import { cloudinaryImageUpload } from "@/core/apis/cloudinary"
-import { setUserDetails } from "@/core/redux/slices/userSlice"
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { settings } from "@/core/apis/settings";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
+import { getCountries } from "@/utils/countries";
+import { getTimezones } from "@/utils/timezones";
+import { users } from "@/core/apis/users";
+import { useAppSelector, useAppDispatch } from "@/core/redux/hooks";
+import { useToast } from "@/components/ui/use-toast";
+import { Toaster } from "@/components/ui/toaster";
+import { Loader2, Upload, Trash2 } from "lucide-react";
+import { cloudinaryImageUpload } from "@/core/apis/cloudinary";
+import { setUserDetails } from "@/core/redux/slices/userSlice";
 
 interface Profile {
-  firstName: string
-  lastName: string
-  email: string
-  jobTitle?: string
-  country?: string
-  timezone?: string
-  description?: string
-  profilePicture?: string
+  firstName: string;
+  lastName: string;
+  email: string;
+  jobTitle?: string;
+  country?: string;
+  timezone?: string;
+  description?: string;
+  profilePicture?: string;
 }
 
 export default function MyProfile() {
-  const currentUser = useAppSelector((state) => state.user.userDetails)
-  const { toast } = useToast()
-  const dispatch = useAppDispatch()
+  const currentUser = useAppSelector((state) => state.user.userDetails);
+  const { toast } = useToast();
+  const dispatch = useAppDispatch();
 
-  const [profile, setProfile] = useState<Profile | null>(null)
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [countries, setCountries] = useState<{ value: string; label: string }[]>([])
-  const [timezones, setTimezones] = useState<{ value: string; label: string }[]>([])
-  const [profileUploading, setProfileUploading] = useState(false)
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [countries, setCountries] = useState<
+    { value: string; label: string }[]
+  >([]);
+  const [timezones, setTimezones] = useState<
+    { value: string; label: string }[]
+  >([]);
+  const [profileUploading, setProfileUploading] = useState(false);
 
   const fetchUserData = useCallback(async () => {
-    if (!currentUser) return
+    if (!currentUser) return;
 
-    setIsLoading(true)
-    setError(null)
+    setIsLoading(true);
+    setError(null);
 
     try {
-      const response = await users.getUserDetails(currentUser._id)
-      const userData = response?.users?.[0]
+      const response = await users.getUserDetails(currentUser._id);
+      const userData = response?.users?.[0];
 
       if (userData) {
         setProfile({
@@ -61,130 +71,151 @@ export default function MyProfile() {
           timezone: userData.timezone || "",
           description: userData.description || "",
           profilePicture: userData.profilePicture || "",
-        })
+        });
       } else {
-        setError("User data not found")
+        setError("User data not found");
       }
     } catch (error) {
-      setError("Failed to fetch user data")
+      setError("Failed to fetch user data");
       toast({
         title: "Error",
         description: "Failed to fetch user data",
-      })
+      });
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }, [currentUser, toast])
+  }, [currentUser, toast]);
 
   useEffect(() => {
-    fetchUserData()
-  }, [fetchUserData])
+    fetchUserData();
+  }, [fetchUserData]);
 
   useEffect(() => {
-    setCountries(getCountries())
-    setTimezones(getTimezones())
-  }, [])
+    setCountries(getCountries());
+    setTimezones(getTimezones());
+  }, []);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     if (profile) {
-      setProfile({ ...profile, [e.target.name]: e.target.value })
+      setProfile({ ...profile, [e.target.name]: e.target.value });
     }
-  }
+  };
 
   const handleSelectChange = (name: string) => (value: string) => {
     if (profile) {
-      setProfile({ ...profile, [name]: value })
+      setProfile({ ...profile, [name]: value });
     }
-  }
+  };
 
-  const handleProfileImageUpdate = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
+  const handleProfileImageUpdate = async (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
 
-    const formData = new FormData()
-    formData.append("file", file)
-    formData.append("upload_preset", process.env.NEXT_PUBLIC_CLOUDINARY_PRESET || "")
-    formData.append("folder", "profiles")
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append(
+      "upload_preset",
+      process.env.NEXT_PUBLIC_CLOUDINARY_PRESET || ""
+    );
+    formData.append("folder", "profiles");
 
-    setProfileUploading(true)
+    setProfileUploading(true);
     try {
-      const responseData = await cloudinaryImageUpload(formData)
+      const responseData = await cloudinaryImageUpload(formData);
       if (profile && currentUser) {
-        const updatedProfile = { ...profile, profilePicture: responseData.secure_url }
-        setProfile(updatedProfile)
-        await settings.updateUserDetailsApi({ profilePicture: responseData.secure_url }, currentUser._id)
-        dispatch(setUserDetails({ ...currentUser, profilePicture: responseData.secure_url }))
+        const updatedProfile = {
+          ...profile,
+          profilePicture: responseData.secure_url,
+        };
+        setProfile(updatedProfile);
+        await settings.updateUserDetailsApi(
+          { profilePicture: responseData.secure_url },
+          currentUser._id
+        );
+        dispatch(
+          setUserDetails({
+            ...currentUser,
+            profilePicture: responseData.secure_url,
+          })
+        );
         toast({
           title: "Success",
           description: "Profile picture updated successfully",
-        })
+        });
       }
     } catch (error) {
       toast({
         title: "Error",
         description: "Failed to update profile picture",
-      })
+      });
     } finally {
-      setProfileUploading(false)
+      setProfileUploading(false);
     }
-  }
+  };
 
   const deleteProfileImage = async () => {
-    if (!profile || !currentUser) return
+    if (!profile || !currentUser) return;
 
     try {
-      const updatedProfile = { ...profile, profilePicture: "" }
-      setProfile(updatedProfile)
-      await settings.updateUserDetailsApi({ profilePicture: "" }, currentUser._id)
-      dispatch(setUserDetails({ ...currentUser, profilePicture: "" }))
+      const updatedProfile = { ...profile, profilePicture: "" };
+      setProfile(updatedProfile);
+      await settings.updateUserDetailsApi(
+        { profilePicture: "" },
+        currentUser._id
+      );
+      dispatch(setUserDetails({ ...currentUser, profilePicture: "" }));
       toast({
         title: "Success",
         description: "Profile picture deleted successfully",
-      })
+      });
     } catch (error) {
       toast({
         title: "Error",
         description: "Failed to delete profile picture",
-      })
+      });
     }
-  }
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!profile || !currentUser) return
+    e.preventDefault();
+    if (!profile || !currentUser) return;
 
-    setIsLoading(true)
+    setIsLoading(true);
     try {
-      await settings.updateUserDetailsApi(profile, currentUser._id)
-      const res = await users.getUserDetails(currentUser._id)
-      const updatedUser = res.users[0]
+      await settings.updateUserDetailsApi(profile, currentUser._id);
+      const res = await users.getUserDetails(currentUser._id);
+      const updatedUser = res.users[0];
 
       if (!updatedUser) {
-        throw new Error("User details not updated")
+        throw new Error("User details not updated");
       }
 
-      dispatch(setUserDetails({ ...currentUser, ...updatedUser }))
+      dispatch(setUserDetails({ ...currentUser, ...updatedUser }));
       toast({
         title: "Success",
         description: "User details updated successfully",
-      })
+      });
     } catch (error) {
-      setError("Failed to update user details")
+      setError("Failed to update user details");
       toast({
         title: "Error",
         description: "Failed to update user details",
-      })
+      });
     } finally {
-      setIsLoading(false)
+      setIsLoading(false);
     }
-  }
+  };
 
   if (isLoading) {
     return (
       <div className="flex justify-center items-center h-64">
         <Loader2 className="h-8 w-8 animate-spin" />
       </div>
-    )
+    );
   }
 
   if (error) {
@@ -193,24 +224,29 @@ export default function MyProfile() {
         <div className="text-red-500">{error}</div>
         <Toaster />
       </>
-    )
+    );
   }
 
   if (!profile) {
-    return <div>No profile data available.</div>
+    return <div>No profile data available.</div>;
   }
 
   return (
     <>
       <div className="space-y-6">
         <h2 className="text-2xl font-bold">Personal Information</h2>
-        <p className="text-sm text-gray-500">Update your photo and personal details.</p>
+        <p className="text-sm text-gray-500">
+          Update your photo and personal details.
+        </p>
 
         <form onSubmit={handleSubmit} className="space-y-8">
           <div className="flex items-center space-x-4">
             <Avatar className="w-24 h-24">
               {profile.profilePicture ? (
-                <AvatarImage src={profile.profilePicture} alt={`${profile.firstName} ${profile.lastName}`} />
+                <AvatarImage
+                  src={profile.profilePicture}
+                  alt={`${profile.firstName} ${profile.lastName}`}
+                />
               ) : (
                 <div className="bg-gray-200 w-full h-full flex items-center justify-center">
                   <span className="text-gray-500">No Image</span>
@@ -218,13 +254,18 @@ export default function MyProfile() {
               )}
             </Avatar>
             <div className="flex gap-4">
-              <Button type="button" variant="outline" className="mb-2" disabled={profileUploading}>
+              <Button
+                type="button"
+                variant="outline"
+                className="flex items-center"
+                disabled={profileUploading}
+              >
+                {profileUploading ? (
+                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                ) : (
+                  <Upload className="h-4 w-4 mr-2" />
+                )}
                 <Label htmlFor="avatar-upload" className="cursor-pointer">
-                  {profileUploading ? (
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                  ) : (
-                    <Upload className="h-4 w-4 mr-2" />
-                  )}
                   Update
                 </Label>
                 <Input
@@ -239,7 +280,7 @@ export default function MyProfile() {
               <Button
                 type="button"
                 variant="outline"
-                className="text-red-500"
+                className="flex items-center text-red-500"
                 onClick={deleteProfileImage}
                 disabled={!profile.profilePicture}
               >
@@ -252,23 +293,48 @@ export default function MyProfile() {
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label htmlFor="firstName">First name</Label>
-              <Input id="firstName" name="firstName" value={profile.firstName} onChange={handleInputChange} />
+              <Input
+                id="firstName"
+                name="firstName"
+                value={profile.firstName}
+                onChange={handleInputChange}
+              />
             </div>
             <div className="space-y-2">
               <Label htmlFor="lastName">Last name</Label>
-              <Input id="lastName" name="lastName" value={profile.lastName} onChange={handleInputChange} />
+              <Input
+                id="lastName"
+                name="lastName"
+                value={profile.lastName}
+                onChange={handleInputChange}
+              />
             </div>
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>
-              <Input id="email" name="email" type="email" value={profile.email} onChange={handleInputChange} disabled />
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={profile.email}
+                onChange={handleInputChange}
+                disabled
+              />
             </div>
             <div className="space-y-2">
               <Label htmlFor="jobTitle">Job title</Label>
-              <Input id="jobTitle" name="jobTitle" value={profile.jobTitle || ""} onChange={handleInputChange} />
+              <Input
+                id="jobTitle"
+                name="jobTitle"
+                value={profile.jobTitle || ""}
+                onChange={handleInputChange}
+              />
             </div>
             <div className="space-y-2">
               <Label htmlFor="country">Country</Label>
-              <Select value={profile.country} onValueChange={handleSelectChange("country")}>
+              <Select
+                value={profile.country}
+                onValueChange={handleSelectChange("country")}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="Select a country" />
                 </SelectTrigger>
@@ -283,7 +349,10 @@ export default function MyProfile() {
             </div>
             <div className="space-y-2">
               <Label htmlFor="timezone">Timezone</Label>
-              <Select value={profile.timezone} onValueChange={handleSelectChange("timezone")}>
+              <Select
+                value={profile.timezone}
+                onValueChange={handleSelectChange("timezone")}
+              >
                 <SelectTrigger>
                   <SelectValue placeholder="Select a timezone" />
                 </SelectTrigger>
@@ -300,16 +369,23 @@ export default function MyProfile() {
 
           <div className="space-y-2">
             <Label htmlFor="description">Bio</Label>
-            <Textarea id="description" name="description" value={profile.description || ""} onChange={handleInputChange} rows={4} />
+            <Textarea
+              id="description"
+              name="description"
+              value={profile.description || ""}
+              onChange={handleInputChange}
+              rows={4}
+            />
           </div>
           <Button type="submit" disabled={isLoading}>
-            {isLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
+            {isLoading ? (
+              <Loader2 className="h-4 w-4 animate-spin mr-2" />
+            ) : null}
             Save Changes
           </Button>
         </form>
       </div>
       <Toaster />
     </>
-  )
+  );
 }
-

From 668020848110c325e1633cbc40a3184de8f2dec5 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 5 Feb 2025 11:39:09 +0300
Subject: [PATCH 29/32] Enhance API token management by improving access token
 checks and adding token regeneration functionality

---
 .../components/Settings/ApiTokens.tsx         | 63 ++++++++++---------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/netmanager-app/components/Settings/ApiTokens.tsx b/netmanager-app/components/Settings/ApiTokens.tsx
index de2d52d192..052befc151 100644
--- a/netmanager-app/components/Settings/ApiTokens.tsx
+++ b/netmanager-app/components/Settings/ApiTokens.tsx
@@ -10,7 +10,7 @@ import CreateClientForm from "./CreateClientForm"
 import DialogWrapper from "./DialogWrapper"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Skeleton } from "@/components/ui/skeleton"
-import { Edit, Copy, Info, Plus } from "lucide-react"
+import { Edit, Copy, Info, Plus, RefreshCw } from "lucide-react"
 import { users } from "@/core/apis/users"
 import type { Client } from "@/app/types/clients"
 import { settings } from "@/core/apis/settings"
@@ -57,7 +57,6 @@ const UserClientsTable: React.FC = () => {
     setIsLoading(true)
     try {
       const response = await settings.getUserClientsApi(userInfo?._id || "")
-      console.log(response)
       if (response) {
         dispatch({ type: "ADD_CLIENTS_DETAILS", payload: response })
       }
@@ -79,29 +78,17 @@ const UserClientsTable: React.FC = () => {
     fetchClientDetails()
   }, [userInfo?._id, dispatch])
 
-  const hasAccessToken = (clientId: string) => {
-    const client =
-      Array.isArray(clientsDetails) && clientsDetails
-        ? clientsDetails?.find((client: Client) => client._id === clientId)
-        : undefined
-    return client && client.access_token
+  const hasAccessToken = (clientId: string): boolean => {
+    const client = clients.find((client) => client._id === clientId)
+    return client?.access_token?.token ? true : false
   }
 
-  const getClientToken = async (clientID: string) => {
-    try {
-      const response = await settings.getUserClientsApi(userInfo?._id || "")
-      if (response) { 
-        const client = response.find((client: Client) => client._id === clientID);
-        return client?.access_token?.token;
-      }
-    } catch (error) {
-      console.error(error);
-      toast({
-        title: "Error",
-        description: "Failed to fetch client token",
-        variant: "destructive",
-      });
+  const getClientToken = async (clientId: string): Promise<string | null> => {
+    const client = clients.find((client) => client._id === clientId)
+    if (client?.access_token?.token) {
+      return client.access_token.token
     }
+    return null
   }
 
   const getClientTokenExpiryDate = (clientID: string) => {
@@ -226,13 +213,15 @@ const UserClientsTable: React.FC = () => {
                       : "N/A"}
                   </TableCell>
                   <TableCell>
-                    {hasAccessToken(client._id) ? (
-                      <div className="flex items-center">
-                        <span className="mr-2 font-mono">
-                          {client.access_token?.token.slice(0, 4)}
-                          <span className="mx-1">•••••••</span>
-                          {client.access_token?.token.slice(-4)}
-                        </span>
+                  {client?.access_token ? (
+                      <div className="flex items-center space-x-2">
+                        <div className="flex-1">
+                          <span className="font-mono">
+                            {client.access_token?.token}
+                            <span className="mx-1">•••••••</span>
+                            {client.access_token?.token}
+                          </span>
+                        </div>
                         <Button
                           title="Copy full token"
                           variant="ghost"
@@ -251,10 +240,22 @@ const UserClientsTable: React.FC = () => {
                         >
                           <Copy className="h-4 w-4" />
                         </Button>
+                        <Button
+                          title="Generate new token"
+                          variant="ghost"
+                          size="sm"
+                          disabled={isLoadingToken}
+                          onClick={() => {
+                            setSelectedClient(client)
+                            handleGenerateToken(client)
+                          }}
+                        >
+                          <RefreshCw className="h-4 w-4" />
+                        </Button>
                       </div>
                     ) : (
                       <Button
-                        variant={!hasAccessToken(client._id) ? "default" : "secondary"}
+                        variant="default"
                         size="sm"
                         disabled={isLoadingToken}
                         onClick={() => {
@@ -262,7 +263,7 @@ const UserClientsTable: React.FC = () => {
                           handleGenerateToken(client)
                         }}
                       >
-                        Generate
+                        Generate Token
                       </Button>
                     )}
                   </TableCell>

From 0318786c3ed293ae30751c5fa49b7315f33dad99 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 5 Feb 2025 12:32:01 +0300
Subject: [PATCH 30/32] Add ClientsDetails interface and improve access token
 display in UserClientsTable

---
 netmanager-app/app/types/clients.ts           | 10 ++++++
 .../components/Settings/ApiTokens.tsx         | 36 ++++++-------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/netmanager-app/app/types/clients.ts b/netmanager-app/app/types/clients.ts
index 9e0235a51c..57cb7224c8 100644
--- a/netmanager-app/app/types/clients.ts
+++ b/netmanager-app/app/types/clients.ts
@@ -23,5 +23,15 @@ import { UserDetails } from './users';
     user: UserDetails
     access_token: AccessToken
   }
+
+export interface ClientsDetails {
+  _id: string
+    isActive: boolean
+    ip_addresses: string[]
+    name: string
+    client_secret: string
+    user: UserDetails
+    
+}
   
   
\ No newline at end of file
diff --git a/netmanager-app/components/Settings/ApiTokens.tsx b/netmanager-app/components/Settings/ApiTokens.tsx
index 052befc151..a641e2c613 100644
--- a/netmanager-app/components/Settings/ApiTokens.tsx
+++ b/netmanager-app/components/Settings/ApiTokens.tsx
@@ -10,7 +10,7 @@ import CreateClientForm from "./CreateClientForm"
 import DialogWrapper from "./DialogWrapper"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Skeleton } from "@/components/ui/skeleton"
-import { Edit, Copy, Info, Plus, RefreshCw } from "lucide-react"
+import { Edit, Copy, Info, Plus } from "lucide-react"
 import { users } from "@/core/apis/users"
 import type { Client } from "@/app/types/clients"
 import { settings } from "@/core/apis/settings"
@@ -57,6 +57,7 @@ const UserClientsTable: React.FC = () => {
     setIsLoading(true)
     try {
       const response = await settings.getUserClientsApi(userInfo?._id || "")
+      console.log(response)
       if (response) {
         dispatch({ type: "ADD_CLIENTS_DETAILS", payload: response })
       }
@@ -90,7 +91,6 @@ const UserClientsTable: React.FC = () => {
     }
     return null
   }
-
   const getClientTokenExpiryDate = (clientID: string) => {
     const client =
       Array.isArray(clientsDetails) && clientsDetails
@@ -213,15 +213,13 @@ const UserClientsTable: React.FC = () => {
                       : "N/A"}
                   </TableCell>
                   <TableCell>
-                  {client?.access_token ? (
-                      <div className="flex items-center space-x-2">
-                        <div className="flex-1">
-                          <span className="font-mono">
-                            {client.access_token?.token}
-                            <span className="mx-1">•••••••</span>
-                            {client.access_token?.token}
-                          </span>
-                        </div>
+                    {client?.access_token  ? (
+                      <div className="flex items-center">
+                        <span className="mr-2 font-mono">
+                          {client.access_token.token.slice(0, 4)}
+                          <span className="mx-1">•••••••</span>
+                          {client.access_token?.token.slice(-4)}
+                        </span>
                         <Button
                           title="Copy full token"
                           variant="ghost"
@@ -240,22 +238,10 @@ const UserClientsTable: React.FC = () => {
                         >
                           <Copy className="h-4 w-4" />
                         </Button>
-                        <Button
-                          title="Generate new token"
-                          variant="ghost"
-                          size="sm"
-                          disabled={isLoadingToken}
-                          onClick={() => {
-                            setSelectedClient(client)
-                            handleGenerateToken(client)
-                          }}
-                        >
-                          <RefreshCw className="h-4 w-4" />
-                        </Button>
                       </div>
                     ) : (
                       <Button
-                        variant="default"
+                        variant={!hasAccessToken(client._id) ? "default" : "secondary"}
                         size="sm"
                         disabled={isLoadingToken}
                         onClick={() => {
@@ -263,7 +249,7 @@ const UserClientsTable: React.FC = () => {
                           handleGenerateToken(client)
                         }}
                       >
-                        Generate Token
+                        Generate
                       </Button>
                     )}
                   </TableCell>

From 4aff39c669f371ca1551e4bf0337e7601ddace73 Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Wed, 5 Feb 2025 12:33:29 +0300
Subject: [PATCH 31/32] Remove unused ClientsDetails interface from clients.ts

---
 netmanager-app/app/types/clients.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/netmanager-app/app/types/clients.ts b/netmanager-app/app/types/clients.ts
index 57cb7224c8..bf4dca3510 100644
--- a/netmanager-app/app/types/clients.ts
+++ b/netmanager-app/app/types/clients.ts
@@ -23,15 +23,3 @@ import { UserDetails } from './users';
     user: UserDetails
     access_token: AccessToken
   }
-
-export interface ClientsDetails {
-  _id: string
-    isActive: boolean
-    ip_addresses: string[]
-    name: string
-    client_secret: string
-    user: UserDetails
-    
-}
-  
-  
\ No newline at end of file

From faef2c61d012890cb3695d3c1f2a0799eb93e30e Mon Sep 17 00:00:00 2001
From: Daniel Ntege <danientege785@gmail.com>
Date: Thu, 6 Feb 2025 09:56:22 +0300
Subject: [PATCH 32/32] Refactor UserClientsTable to improve access token
 handling and add user clients hook

---
 .../components/Settings/ApiTokens.tsx         | 45 +++++++++++--------
 netmanager-app/core/hooks/useClients.ts       |  4 +-
 netmanager-app/core/hooks/useUserClients.ts   | 34 ++++++++++++++
 .../core/redux/slices/clientsSlice.ts         | 11 ++++-
 4 files changed, 72 insertions(+), 22 deletions(-)
 create mode 100644 netmanager-app/core/hooks/useUserClients.ts

diff --git a/netmanager-app/components/Settings/ApiTokens.tsx b/netmanager-app/components/Settings/ApiTokens.tsx
index a641e2c613..87ecd2e4da 100644
--- a/netmanager-app/components/Settings/ApiTokens.tsx
+++ b/netmanager-app/components/Settings/ApiTokens.tsx
@@ -16,7 +16,7 @@ import type { Client } from "@/app/types/clients"
 import { settings } from "@/core/apis/settings"
 
 
-const UserClientsTable: React.FC = () => {
+const UserClientsTable = () => {
   const dispatch = useAppDispatch()
   const { toast } = useToast()
   const [showInfoModal, setShowInfoModal] = useState(false)
@@ -42,7 +42,6 @@ const UserClientsTable: React.FC = () => {
       }
       setClients(res.users[0].clients)
     } catch (error) {
-      console.error(error)
       toast({
         title: "Error",
         description: "Failed to fetch user details",
@@ -57,11 +56,10 @@ const UserClientsTable: React.FC = () => {
     setIsLoading(true)
     try {
       const response = await settings.getUserClientsApi(userInfo?._id || "")
-      console.log(response)
       if (response) {
         dispatch({ type: "ADD_CLIENTS_DETAILS", payload: response })
       }
-      setClientsDetails(response)
+      setClientsDetails(response.clients)
     } catch (error) {
       console.error(error)
       toast({
@@ -80,16 +78,19 @@ const UserClientsTable: React.FC = () => {
   }, [userInfo?._id, dispatch])
 
   const hasAccessToken = (clientId: string): boolean => {
-    const client = clients.find((client) => client._id === clientId)
+    const client =
+      Array.isArray(clientsDetails) && clientsDetails
+        ? clientsDetails?.find((client: Client) => client._id === clientId)
+        : undefined
     return client?.access_token?.token ? true : false
   }
 
-  const getClientToken = async (clientId: string): Promise<string | null> => {
-    const client = clients.find((client) => client._id === clientId)
-    if (client?.access_token?.token) {
-      return client.access_token.token
-    }
-    return null
+  const getClientToken = (clientID: string) => {
+    const client =
+      Array.isArray(clientsDetails) && clientsDetails
+        ? clientsDetails?.find((client: Client) => client._id === clientID)
+        : undefined
+        return client && client.access_token && client.access_token.token
   }
   const getClientTokenExpiryDate = (clientID: string) => {
     const client =
@@ -99,6 +100,14 @@ const UserClientsTable: React.FC = () => {
     return client && client.access_token && client.access_token.expires
   }
 
+  const getClientTokenCreateAt = (clientID: string) => {
+    const client =
+      Array.isArray(clientsDetails) && clientsDetails
+        ? clientsDetails?.find((client: Client) => client._id === clientID)
+        : undefined
+    return client && client.access_token && client.access_token.createdAt
+  }
+
   const handleGenerateToken = async (res: Client) => {
     setIsLoadingToken(true)
     if (!res?.isActive) {
@@ -208,17 +217,15 @@ const UserClientsTable: React.FC = () => {
                     </span>
                   </TableCell>
                   <TableCell>
-                    {client?.access_token?.createdAt
-                      ? moment(client.access_token.createdAt).format("MMM DD, YYYY")
-                      : "N/A"}
+                  {getClientTokenCreateAt(client._id) && moment(getClientTokenCreateAt(client._id)).format("MMM DD, YYYY")}
                   </TableCell>
                   <TableCell>
-                    {client?.access_token  ? (
+                    {hasAccessToken(client._id) ? (
                       <div className="flex items-center">
-                        <span className="mr-2 font-mono">
-                          {client.access_token.token.slice(0, 4)}
+                        <span className="mr-2 text-slate-700 font-mono">
+                          {getClientToken(client._id)?.slice(0, 2)}
                           <span className="mx-1">•••••••</span>
-                          {client.access_token?.token.slice(-4)}
+                          {getClientToken(client._id)?.slice(-2)}
                         </span>
                         <Button
                           title="Copy full token"
@@ -253,6 +260,7 @@ const UserClientsTable: React.FC = () => {
                       </Button>
                     )}
                   </TableCell>
+
                   <TableCell>
                     {getClientTokenExpiryDate(client._id) &&
                       moment(getClientTokenExpiryDate(client._id)).format("MMM DD, YYYY")}
@@ -280,7 +288,6 @@ const UserClientsTable: React.FC = () => {
           )}
         </TableBody>
       </Table>
-      {/* Add your Pagination component here */}
       <EditClientForm
         open={openEditForm}
         onClose={() => setOpenEditForm(false)}
diff --git a/netmanager-app/core/hooks/useClients.ts b/netmanager-app/core/hooks/useClients.ts
index ebad826dad..c55bc1837c 100644
--- a/netmanager-app/core/hooks/useClients.ts
+++ b/netmanager-app/core/hooks/useClients.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useDispatch } from "react-redux";
-import { getClientsApi } from "../apis/settings";
+import { settings } from "../apis/settings";
 import { setClients, setError} from "../redux/slices/clientsSlice";
 
 export const useClients = () => {
@@ -9,7 +9,7 @@ export const useClients = () => {
 
   const { data, isLoading, error } = useQuery({
     queryKey: ["clients"],
-    queryFn: () => getClientsApi(),
+    queryFn: () => settings.getClientsApi(),
     onSuccess: (data: any) => {
       dispatch(setClients(data));
     },
diff --git a/netmanager-app/core/hooks/useUserClients.ts b/netmanager-app/core/hooks/useUserClients.ts
new file mode 100644
index 0000000000..eaff851659
--- /dev/null
+++ b/netmanager-app/core/hooks/useUserClients.ts
@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+import { useDispatch } from "react-redux";
+import { settings } from "../apis/settings";
+import { setUserClients, setError } from "../redux/slices/clientsSlice";
+import { useAppSelector } from "../redux/hooks";
+
+export const useUserClients = () => {
+  const dispatch = useDispatch();
+  const userDetails = useAppSelector((state) => state.user.userDetails);
+
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["clients", userDetails?._id,],
+    queryFn: () =>
+      settings.getUserClientsApi(
+        userDetails?._id || ""
+      ),
+    onSuccess: (data: any) => {
+      dispatch(setUserClients(data.clients));
+
+    },
+    onError: (error: Error) => {
+      dispatch(setError(error.message));
+    },
+  });
+
+  return {
+    clients: data || [],
+    isLoading,
+    error: error as Error | null,
+  };
+};
+
+
diff --git a/netmanager-app/core/redux/slices/clientsSlice.ts b/netmanager-app/core/redux/slices/clientsSlice.ts
index 5a51bb7e4d..b7668793dd 100644
--- a/netmanager-app/core/redux/slices/clientsSlice.ts
+++ b/netmanager-app/core/redux/slices/clientsSlice.ts
@@ -1,12 +1,13 @@
 import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
-import { Client } from "@/app/types/clients";
+import { Client, AccessToken } from "@/app/types/clients";
 
 export interface ClientsState {
   clients: Client[];
   isLoading: boolean;
   error: string | null;
   clientsDetails: Client[];
+  access_token: AccessToken[];
   refresh: boolean;
 }
 
@@ -14,6 +15,7 @@ const initialState: ClientsState = {
   clients: [],
   isLoading: false,
   clientsDetails: [],
+  accees_token: [],
   refresh: false,
   error: null,
 };
@@ -33,6 +35,12 @@ const clientSlice = createSlice({
     addClientsDetails: (state, action) => {
       state.clientsDetails = action.payload;
     },
+    setAccessToken: (state, action) => {
+      state.access_token = action.payload
+    },
+    setUserClients: (state, action) => {
+      state.clientsDetails = action.payload;
+    },
     performRefresh: (state) => {
       state.refresh = !state.refresh;
     },
@@ -52,6 +60,7 @@ export const {
   addClients,
   addClientsDetails,
   performRefresh,
+  setUserClients,
   setError,
 } = clientSlice.actions;
 export default clientSlice.reducer;