From a79f1d53a7f2a889c8351820c1dade7fc8729a96 Mon Sep 17 00:00:00 2001 From: aishabhakta Date: Thu, 22 Feb 2024 10:13:36 -0500 Subject: [PATCH] Formatting code --- .../settings/org/org-settings/page.tsx | 238 +++++++++--------- .../dashboard/settings/org/user-view/page.tsx | 237 +++++++++-------- .../dashboard/settings/org/workflows/page.tsx | 100 ++++---- src/components/sidebar/index.tsx | 67 +++-- 4 files changed, 307 insertions(+), 335 deletions(-) diff --git a/src/app/dashboard/settings/org/org-settings/page.tsx b/src/app/dashboard/settings/org/org-settings/page.tsx index 1dd651c..b148c1c 100644 --- a/src/app/dashboard/settings/org/org-settings/page.tsx +++ b/src/app/dashboard/settings/org/org-settings/page.tsx @@ -4,128 +4,120 @@ import { FiUpload } from "react-icons/fi"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; - export default function OrganizationSettings() { - const [organizationName, setOrganizationName] = useState(""); - const [logo, setLogo] = useState(null); - const [logoFile, setLogoFile] = useState(null); - - - const handleOrganizationNameChange = ( - event: React.ChangeEvent, - ) => { - setOrganizationName(event.target.value); - }; - - - const handleLogoChange = (event: React.ChangeEvent) => { - if (event.target.files && event.target.files.length > 0) { - const file = event.target.files[0]; - const fileUrl = URL.createObjectURL(file); - setLogo(fileUrl); // Update logo URL for preview - setLogoFile(file); // Update selected file - } else { - setLogo(null); // Reset logo URL if no file is selected - setLogoFile(null); // Reset selected file - } - }; - - - const handleUpdateOrganizationName = () => { - console.log("Organization Name updated to:", organizationName); - }; - - - const handleUploadLogo = () => { - console.log("Logo uploaded:", logo); - }; - - - return ( -
-

Organization Settings

-

- Manage your organization settings here. -

-
- - -
- -
- - -
-

- This will be displayed on sign-in and in app-wide top navigation. -

-
- - -
- -

- This will be displayed on sign-in and in app-wide top navigation. -

-
- {logo ? ( - Organization Logo - ) : ( -
- )} -
- - -
-
-
- {/* CRM Configuration Section */} -
-

CRM Configuration

-

- Connie uses Airtable as a data source for your CBO's client contact - data. -

- {/* You can add an input or a custom component for CRM configuration */} -

No table currently selected.

- {/* Placeholder button for CRM configuration */} - -
-
- ); + const [organizationName, setOrganizationName] = useState(""); + const [logo, setLogo] = useState(null); + const [logoFile, setLogoFile] = useState(null); + + const handleOrganizationNameChange = ( + event: React.ChangeEvent + ) => { + setOrganizationName(event.target.value); + }; + + const handleLogoChange = (event: React.ChangeEvent) => { + if (event.target.files && event.target.files.length > 0) { + const file = event.target.files[0]; + const fileUrl = URL.createObjectURL(file); + setLogo(fileUrl); // Update logo URL for preview + setLogoFile(file); // Update selected file + } else { + setLogo(null); // Reset logo URL if no file is selected + setLogoFile(null); // Reset selected file + } + }; + + const handleUpdateOrganizationName = () => { + console.log("Organization Name updated to:", organizationName); + }; + + const handleUploadLogo = () => { + console.log("Logo uploaded:", logo); + }; + + return ( +
+

Organization Settings

+

+ Manage your organization settings here. +

+
+ +
+ +
+ + +
+

+ This will be displayed on sign-in and in app-wide top navigation. +

+
+ +
+ +

+ This will be displayed on sign-in and in app-wide top navigation. +

+
+ {logo ? ( + Organization Logo + ) : ( +
+ )} +
+ + +
+
+
+ {/* CRM Configuration Section */} +
+

CRM Configuration

+

+ Connie uses Airtable as a data source for your CBO's client contact + data. +

+ {/* You can add an input or a custom component for CRM configuration */} +

No table currently selected.

+ {/* Placeholder button for CRM configuration */} + +
+
+ ); } diff --git a/src/app/dashboard/settings/org/user-view/page.tsx b/src/app/dashboard/settings/org/user-view/page.tsx index 48f4bb9..2f96565 100644 --- a/src/app/dashboard/settings/org/user-view/page.tsx +++ b/src/app/dashboard/settings/org/user-view/page.tsx @@ -1,141 +1,136 @@ "use client"; import React, { useState } from "react"; import { - PhoneCall, - MessageSquareText, - ArrowUpRight, - MoreVertical, + PhoneCall, + MessageSquareText, + ArrowUpRight, + MoreVertical, } from "lucide-react"; import { Checkbox } from "@/components/ui/checkbox"; import { Button } from "@/components/ui/button"; - interface SelectedUsers { - [key: number]: boolean; + [key: number]: boolean; } - interface UserData { - id: number; - name: string; - actionIcon: JSX.Element; - actionText: string; - number: string; - timestamp: string; + id: number; + name: string; + actionIcon: JSX.Element; + actionText: string; + number: string; + timestamp: string; } - // Placeholder data const usersData: UserData[] = [ - { - id: 1, - name: "Melissa L.", - actionIcon: , - actionText: "Called ", - number: "+1 212-883-2727", - timestamp: "January 28, 2024, 5:26 p.m.", - }, - { - id: 2, - name: "Cupid S.", - actionIcon: , - actionText: "Called ", - number: "+1 212-883-2728", - timestamp: "January 29, 2024, 6:15 p.m.", - }, - { - id: 3, - name: "Melissa L.", - actionIcon: , - actionText: "Messaged ", - number: "+1 212-883-2728", - timestamp: "January 30, 2024, 7:15 p.m.", - }, - { - id: 3, - name: "John J.", - actionIcon: , - actionText: "Transferred ", - number: "+1 212-883-2728", - timestamp: "January 31, 2024, 8:25 p.m.", - }, - // ... more users + { + id: 1, + name: "Melissa L.", + actionIcon: , + actionText: "Called ", + number: "+1 212-883-2727", + timestamp: "January 28, 2024, 5:26 p.m.", + }, + { + id: 2, + name: "Cupid S.", + actionIcon: , + actionText: "Called ", + number: "+1 212-883-2728", + timestamp: "January 29, 2024, 6:15 p.m.", + }, + { + id: 3, + name: "Melissa L.", + actionIcon: , + actionText: "Messaged ", + number: "+1 212-883-2728", + timestamp: "January 30, 2024, 7:15 p.m.", + }, + { + id: 3, + name: "John J.", + actionIcon: , + actionText: "Transferred ", + number: "+1 212-883-2728", + timestamp: "January 31, 2024, 8:25 p.m.", + }, + // ... more users ]; export default function Users() { - const [selectedUsers, setSelectedUsers] = useState({}); - const [selectAll, setSelectAll] = useState(false); - const toggleSelectAll = () => { - const newSelectedUsers: SelectedUsers = {}; - if (!selectAll) { - usersData.forEach((user) => { - newSelectedUsers[user.id] = true; - }); - } - setSelectedUsers(newSelectedUsers); - setSelectAll(!selectAll); - }; - - - const toggleSelectUser = (userId: number) => { - setSelectedUsers((prev) => ({ ...prev, [userId]: !prev[userId] })); - }; + const [selectedUsers, setSelectedUsers] = useState({}); + const [selectAll, setSelectAll] = useState(false); + const toggleSelectAll = () => { + const newSelectedUsers: SelectedUsers = {}; + if (!selectAll) { + usersData.forEach((user) => { + newSelectedUsers[user.id] = true; + }); + } + setSelectedUsers(newSelectedUsers); + setSelectAll(!selectAll); + }; + const toggleSelectUser = (userId: number) => { + setSelectedUsers((prev) => ({ ...prev, [userId]: !prev[userId] })); + }; - return ( -
-

Users

-

- Configure voice settings, powered by Twilio. -

-
-
- - - - - - - - - - - - {usersData.map((user) => ( - - - - - - - - ))} - -
- - UserAction - Timestamp -
- toggleSelectUser(user.id)} - /> - {user.name} - {user.actionIcon} - {user.actionText} - {user.number} - {user.timestamp} - -
-
-
- ); + return ( +
+

Users

+

+ Configure voice settings, powered by Twilio. +

+
+
+ + + + + + + + + + + + {usersData.map((user) => ( + + + + + + + + ))} + +
+ + UserAction + Timestamp +
+ toggleSelectUser(user.id)} + /> + {user.name} + {user.actionIcon} + {user.actionText} + {user.number} + {user.timestamp} + +
+
+
+ ); } diff --git a/src/app/dashboard/settings/org/workflows/page.tsx b/src/app/dashboard/settings/org/workflows/page.tsx index ca1a61c..a822ac4 100644 --- a/src/app/dashboard/settings/org/workflows/page.tsx +++ b/src/app/dashboard/settings/org/workflows/page.tsx @@ -2,57 +2,53 @@ import React, { useState } from "react"; import { Button } from "@/components/ui/button"; - export default function VoiceFlowConfiguration() { - const [defaultMessage, setDefaultMessage] = useState(""); - - - const handleDefaultMessageChange = ( - event: React.ChangeEvent, - ) => { - setDefaultMessage(event.target.value); - }; - - - const saveDefaultMessage = () => { - console.log("Default message saved:", defaultMessage); - // Placeholder for future implementation - }; - - - return ( -
-

Voice Flow Configuration

-

- Configure voice settings, powered by Twilio. -

-
-
- - -

- This message will be provided when no agent is available to answer a - call. -

-
- -
- ); + const [defaultMessage, setDefaultMessage] = useState(""); + + const handleDefaultMessageChange = ( + event: React.ChangeEvent + ) => { + setDefaultMessage(event.target.value); + }; + + const saveDefaultMessage = () => { + console.log("Default message saved:", defaultMessage); + // Placeholder for future implementation + }; + + return ( +
+

Voice Flow Configuration

+

+ Configure voice settings, powered by Twilio. +

+
+
+ + +

+ This message will be provided when no agent is available to answer a + call. +

+
+ +
+ ); } diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index df8fb85..9a87c47 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -11,20 +11,16 @@ import { ListChecks, Settings, SquareUser, - ChevronsUpDown + ChevronsUpDown, } from "lucide-react"; - - import { Collapsible, CollapsibleContent, CollapsibleTrigger, -} from "@/components/ui/collapsible" +} from "@/components/ui/collapsible"; import { useState } from "react"; - - interface ButtonLinkProps extends React.HTMLAttributes { href: string; } @@ -34,14 +30,13 @@ const ButtonLink = ({ href, children }: ButtonLinkProps) => { const isActive = pathname === href; return ( - - + ); }; @@ -50,7 +45,6 @@ interface SidebarProps extends React.HTMLAttributes { } export default function Sidebar({ className, isProgramManager }: SidebarProps) { - // const [settingOpen, setSettingOpen] = useState(true); return ( @@ -86,37 +80,32 @@ export default function Sidebar({ className, isProgramManager }: SidebarProps) { Clients - - - - - Settings - - + + + Settings + + <> - + + + + Organization Settings + - - Organization Settings - - - - Audit-log - - - - Users & Accounts - - + Audit-log + - - Voice Flows - + + Users & Accounts + - + + Voice Flows + + );