Backend vibes

.gitignore

@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env*.local
 
 # vercel

app/api/callcenter/route.ts

@@ -0,0 +1,3 @@
+export async function GET(_Request) {
+    return new Response("This is call center endpoint");
+  }

app/dashboard/analytics/page.jsx

@@ -0,0 +1,7 @@
+const  Statistics = () => {
+    return (
+        <div>Statistics</div>
+    )
+}
+
+export default Statistics

app/dashboard/campaigns/[id]/page.jsx

@@ -0,0 +1,39 @@
+import styles from '@/app/ui/dashboard/campaigns/singleCampaign/singleCampaign.module.css'
+import Image from 'next/image'
+
+const SingleCampaignPage = () => {
+    return(
+        <div className={styles.container}>
+            <div className={styles.infoContainer}>
+                <div className={styles.imgContainer}>
+                    <Image src="/noavatar.png" alt="" fill />
+                </div>
+                Organisation
+            </div>
+            <div className={styles.formContainer}>
+                <form action="" className={styles.form}>
+                    <label>Organisation</label>
+                    <input type='text' name='Organisation' placeholder='Organisation' />
+                    <label>Campaign Title</label>
+                    <input type='text' name='Campaign Title' placeholder='Campaign Title' />
+                    <label>Duration</label>
+                    <input type='text' name='Duration' placeholder='6 weeks' />
+                    <label>Location</label>
+                    <input type='text' name='Location' placeholder='Kalangala' />
+                    <label>Category</label>
+                    <select name="cat" id="cat">
+                        <option value="Health">Health</option>
+                        <option value="Works and Transport">Works and Transport</option>
+                        <option value="Gender and Equality">Gender and Equality</option>
+                        <option value="Disaster Preparedness">Disaster Preparedness</option>
+                    </select>
+                    <label>Description</label>
+                    <textarea name="desc" id="desc" rows="10" placeholder='Project Description'></textarea>
+                    <button>Update</button>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default SingleCampaignPage

app/dashboard/campaigns/add/page.jsx

@@ -0,0 +1,25 @@
+import styles from '@/app/ui/dashboard/campaigns/addCampaign/addCampaign.module.css'
+
+const AddCampaign = () => {
+    return (
+        <div className={styles.container}>
+            <form action="" className={styles.form}>
+                <input type="text" placeholder='Title' name='Title' required />
+                <select name="cat" id="cat">
+                    <option value="general">Choose a Category</option>
+                    <option value="Health">Health</option>
+                    <option value="Finance">Finance</option>
+                    <option value="Non-Profit">Non-Profit</option>
+                </select>
+                <input type="text" placeholder='Duration'  name='Duration' />
+                <input type="Region" placeholder='Region'  name='Region' />
+                <input type="text" placeholder='Dept'  name='Dept' />
+                <input type="text" placeholder='End Date'  name='EndDate' />
+                <textarea name='desc' id='desc' rows="16" placeholder='Description'></textarea>
+                <button type='submit'>Submit</button>
+            </form>
+        </div>
+    )
+}
+
+export default AddCampaign

app/dashboard/campaigns/addCallCampaign/page.jsx

@@ -0,0 +1,32 @@
+import styles from '@/app/ui/dashboard/campaign/addCampaign/addCallCampaign.module.css'
+
+const AddCallCampaign = () => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.subcontainer}>
+                <div className={styles.form}>
+                <form action="" className={styles.form}>
+                <input type="text" placeholder='Campaign Title' name='Campaign Title' required />
+                <input type="text" placeholder='Organisation'  name='Organisation' />
+                <input type="text" placeholder='Department'  name='Department' />
+                <select name="cat" id="cat">
+                    <option value="general">Choose a Region</option>
+                    <option value="Central Region">Central Region</option>
+                    <option value="Eastern Region">Eastern Region</option>
+                    <option value="Western Region">Western Region</option>
+                    <option value="North Region">North Region</option>
+                    <option value="All Regions">All Regions</option>
+                </select>
+                <div className={styles.uploadBtn}>
+                    <button type='submit' className={styles.uploadButton}>Upload Excel/CSV</button>
+                    <button type='submit' className={styles.uploadButton}>Upload Audio</button>
+                </div>
+                </form>
+            </div>
+            <button type='submit' className={styles.call}>Call</button>
+            </div>
+        </div>
+    )
+}
+
+export default AddCallCampaign

app/dashboard/campaigns/page.jsx

@@ -0,0 +1,63 @@
+import Search from '@/app/ui/dashboard/search/search';
+import styles from '@/app/ui/dashboard/campaigns/campaigns.module.css';
+import Link from 'next/link';
+import Image from 'next/image';
+import Pagination from '@/app/ui/dashboard/pagination/pagination';
+// import { SearchParams } from 'next/navigation'
+import { fetchCampaigns } from '@/app/lib/data';
+
+const  Campaigns = async ({ SearchParams }) => {
+    const q = SearchParams?.q || '';
+    const page = SearchParams?.page || 1;
+    const {count, campaigns} = await fetchCampaigns(q, page);
+    return (
+        <div className={styles.container}>
+            <div className={styles.top}>
+                <Search placeholder="Search for a Campaign..." />
+                <Link href="/dashboard/campaigns/add">
+                    <button className={styles.addButton}>Add New</button>
+                </Link>
+            </div>
+            <table className={styles.table}>
+                <thead>
+                    <tr>
+                        <td>Title</td>
+                        <td>Campaign</td>
+                        <td>Duration</td>
+                        <td>Created on</td>
+                        <td>Status</td>
+                        <td>Action</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    {campaigns.map((campaign) => {
+                        <tr key={campaign.id}>
+                            <td>
+                                <div className={styles.campaign}>
+                                    <Image src={campaign.img || "/noavatar.png"} alt="" width={40} height={40} className={styles.campaignImage}/>
+                                    {campaign.title}
+                                </div>
+                            </td>
+                            <td>{campaign.campaign}</td>
+                            <td>{campaign.duration}</td>
+                            <td>{campaign.createdAt?.toString().splice(4, 16)}</td>
+                            <td>{campaign.isActive ? "Active" : "Passive"}</td>
+                            <td>
+                                <div className={styles.buttons}>
+                                    <Link href={`/dashboard/campaigns/${campaign.id}`}>
+                                    <button className={`${styles.button} ${styles.view}`}>View</button>
+                                </Link>
+                                    <button className={`${styles.button} ${styles.delete}`}>delete</button>
+                                </div>
+
+                            </td>
+                        </tr>
+                    })}
+                </tbody>
+            </table>
+            <Pagination count={count} />
+        </div>
+    )
+}
+
+export default Campaigns

app/dashboard/layout.jsx

@@ -0,0 +1,24 @@
+import Navbar from "../ui/dashboard/navbar/navbar"
+import Sidebar from "../ui/dashboard/sidebar/sidebar"
+// import Campaign from "../ui/dashboard/campaign/campaign"
+// import Status from "../ui/dashboard/campStatus/campStatus";
+// import Calls from "../ui/dashboard/callStatus/callStatus";
+import styles from "../ui/dashboard/dashboard.module.css"
+import Footer from "../ui/dashboard/footer/footer"
+
+const  Layout = ({children}) => {
+    return (
+        <div className={styles.container}>
+            <div className={styles.menu}>
+                <Sidebar/>    
+            </div>
+            <div className={styles.content}>
+                <Navbar/>
+                {children}
+                <Footer />
+            </div>
+        </div>
+    )
+}
+
+export default Layout

app/dashboard/page.jsx

@@ -0,0 +1,28 @@
+import Rightbar from "../ui/dashboard/rightbar/rightbar"
+import Calls from "../ui/dashboard/callStatus/callStatus"
+import Campaign from "../ui/dashboard/campaign/campaign"
+import Status from "../ui/dashboard/campStatus/campStatus"
+import Chart from "../ui/dashboard/chart/chart"
+import Stats from "../ui/dashboard/stats/stats";
+import styles from "../ui/dashboard/dashboard.module.css"
+
+const Dashboard = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.main}>
+        <div className={styles.cards}>
+          <Campaign/>
+          <Status/>
+          <Calls/>
+        </div>
+        <Stats/>
+        <Chart/>
+      </div>
+      <div className={styles.side}>
+        <Rightbar/>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard;

app/dashboard/profile/[id]/page.jsx

@@ -0,0 +1,42 @@
+import styles from '@/app/ui/dashboard/profile/singleUser/singleUser.module.css'
+import Image from 'next/image'
+
+const SingleUserPage = () => {
+    return(
+        <div className={styles.container}>
+            <div className={styles.infoContainer}>
+                <div className={styles.imgContainer}>
+                    <Image src="/noavatar.png" alt="" fill />
+                </div>
+                John Doe
+            </div>
+            <div className={styles.formContainer}>
+                <form action="" className={styles.form}>
+                    <label>Username</label>
+                    <input type='text' name='Username' placeholder='John Doe' />
+                    <label>Email</label>
+                    <input type='email' name='Email' placeholder='john@gmail.com' />
+                    <label>Password</label>
+                    <input type='password' name='Password' />
+                    <label>Phone</label>
+                    <input type='text' name='Phone' placeholder='+256783923112' />
+                    <label>Address</label>
+                    <input type='text' name='Address' placeholder='Kalangala' />
+                    <label>Is Admin?</label>
+                    <select name="isAdmin" id="isAdmin">
+                        <option value={true}>Yes</option>
+                        <option value={false}>No</option>
+                    </select>
+                    <label>Is Active</label>
+                    <select name="isActive" id="isActive">
+                        <option value={true}>Yes</option>
+                        <option value={false}>No</option>
+                    </select>
+                    <button>Update</button>
+                </form>
+            </div>
+        </div>
+    )
+}
+
+export default SingleUserPage

app/dashboard/profile/add/page.jsx

@@ -0,0 +1,29 @@
+import { addUser } from '@/app/lib/actions';
+import styles from '@/app/ui/dashboard/profile/addProfile/addProfile.module.css'
+
+const AddProfilePage = () => {
+    return (
+        <div className={styles.container}>
+            <form action={addUser} className={styles.form}>
+                <input type="text" placeholder='Username' name='username' required />
+                <input type="email" placeholder='Email' name='email' required />
+                <input type="password" placeholder='Password' name='password' required />
+                <input type="phone" placeholder='Phone' name='phone' />
+                <select name="isAdmin" id="isAdmin">
+                    <option value={false}>Is Admin?</option>
+                    <option value={true}>Yes</option>
+                    <option value={false}>No</option>
+                </select>
+                <select name="isActive" id="isActive">
+                    <option value={true}>Is Active?</option>
+                    <option value={true}>Yes</option>
+                    <option value={false}>No</option>
+                </select>
+                <textarea name='address' id='addressc' rows="16" placeholder='Address'></textarea>
+                <button type='submit'>Submit</button>
+            </form>
+        </div>
+    )
+}
+
+export default AddProfilePage;

app/dashboard/profile/page.jsx

@@ -0,0 +1,62 @@
+import Search from '@/app/ui/dashboard/search/search';
+import styles from '@/app/ui/dashboard/profile/profile.module.css';
+import Link from 'next/link';
+import Image from 'next/image';
+import Pagination from '@/app/ui/dashboard/pagination/pagination';
+import { fetchUsers } from '@/app/lib/data';
+
+const  Profile = async ( {searchParams} ) => {
+    const q = searchParams?.q || '';
+    const page = searchParams?.page || 1;
+    const {count, users} = await fetchUsers(q, page);
+    return (
+        <div className={styles.container}>
+            <div className={styles.top}>
+                <Search placeholder="Search for a user..." />
+                <Link href="/dashboard/profile/add">
+                    <button className={styles.addButton}>Add New</button>
+                </Link>
+            </div>
+            <table className={styles.table}>
+                <thead>
+                    <tr>
+                        <td>Name</td>
+                        <td>Email</td>
+                        <td>Created on</td>
+                        <td>Role</td>
+                        <td>Status</td>
+                        <td>Action</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    {users.map((user) => (
+                        <tr key={user.id}>
+                            <td>
+                                <div className={styles.user}>
+                                    <Image src={user.img || "/noavatar.png"} alt="" width={40} height={40} className={styles.userImage}/>
+                                    {user.username}
+                                </div>
+                            </td>
+                            <td>{user.email}</td>
+                            <td>{user.createdAt?.toString().slice(4, 16)}</td>
+                            <td>{user.isAdmin ? "Admin" : "Client"}</td>
+                            <td>{user.isActive ? "Active" : "Passive"}</td>
+                            <td>
+                                <div className={styles.buttons}>
+                                    <Link href={`/dashboard/profile/${user.id}`}>
+                                    <button className={`${styles.button} ${styles.view}`}>View</button>
+                                </Link>
+                                    <button className={`${styles.button} ${styles.delete}`}>delete</button>
+                                </div>
+
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+            <Pagination count={count} />
+        </div>
+    )
+}
+
+export default Profile

app/layout.js

@@ -1,11 +1,11 @@
 import { Inter } from 'next/font/google'
-import './globals.css'
+import './ui/globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata = {
-  title: 'Lama Dev Next.js Admin Dashboard',
-  description: 'Next.js Tutorial',
+  title: 'Outbound IVR Dashboard',
+  description: 'Your Ideal PBX Solution.',
 }
 
 export default function RootLayout({ children }) {