Skip to content

Commit

Permalink
fix .env
Browse files Browse the repository at this point in the history
  • Loading branch information
Arun Kumar committed Oct 8, 2024
1 parent 7a86ea7 commit d0e4809
Show file tree
Hide file tree
Showing 7 changed files with 412 additions and 163 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,4 @@ dist-ssr
*.njsproj
*.sln
*.sw?
.env
202 changes: 108 additions & 94 deletions src/components/pages/Profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ import { useAuth, useThemes } from "../../context/Context";
import { useEffect, useState } from "react";
import Person from "../custom/Persona";
import Heading from "../utils/Heading";
import Loader from "../custom/Loader";

const ProfileCard = () => {
const [user, setUser] = useState<any>(null);
const [manager, setManager] = useState<any>(null);
const [loadgin, setLoading] = useState(false);

const { getCurrentUser, getUsers } = useAuth();

Expand Down Expand Up @@ -43,7 +45,9 @@ const ProfileCard = () => {
</tr>
<tr>
<td className="border px-4 py-2">Admin</td>
<td className="border px-4 py-2">{user.isAdmin ? "Yes":"No"}</td>
<td className="border px-4 py-2">
{user.isAdmin ? "Yes" : "No"}
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -72,12 +76,11 @@ const ProfileCard = () => {

useEffect(() => {
getCurrentUser().then(async (email: string) => {
setLoading(true);
const users = await getUsers();

const user = users.find((x: any) => x.primaryEmail === email);

console.log("user and manager", { user, manager });

const userData = {
id: user.id,
name: user.name.fullName,
Expand All @@ -94,6 +97,7 @@ const ProfileCard = () => {
if (user.isAdmin === true) {
setManager(null);
setUser(userData);
setLoading(false);
return;
}
const userManager = users.find(
Expand All @@ -112,106 +116,116 @@ const ProfileCard = () => {
};
setUser(userData);
setManager(managerData);
setLoading(false);
});
}, []);

return (
<div className="w-full h-full ">
<div className="mt-4"><Heading>Profile</Heading></div>
{user !== null && (
<div className="flex flex-col p-6">
<div className="flex mb-4">
<div className="w-1/8">
<Person
imageUrl={user?.image}
imageInitials={user?.name[0]}
size={PersonaSize.size100}
block
/>
</div>
<div className="w-2/3 pl-4">
<h2 className="text-xl font-bold">{user.name}</h2>
<p className="text-gray-700">
{user.department} | {user.jobTitle}
</p>
<div className="mt-4">
<Heading>Profile</Heading>
</div>

<p className="text-gray-700">{user.location}</p>
<div className="flex mt-4">
<Icon
styles={{ root: { fontSize: "16px" } }}
iconName="Phone"
className="mr-4 cursor-pointer"
/>
<Icon
styles={{ root: { fontSize: "16px" } }}
iconName="Mail"
className="mr-4 cursor-pointer"
/>
<Icon
styles={{ root: { fontSize: "16px" } }}
iconName="Org"
className="mr-4 cursor-pointer"
/>
{loadgin ? (
<div className="w-full h-[90vh] flex items-center justify-center"><Loader /></div>
) : (
<>
{user !== null && (
<div className="flex flex-col p-6">
<div className="flex mb-4">
<div className="w-1/8">
<Person
imageUrl={user?.image}
imageInitials={user?.name[0]}
size={PersonaSize.size100}
block
/>
</div>
<div className="w-2/3 pl-4">
<h2 className="text-xl font-bold">{user.name}</h2>
<p className="text-gray-700">
{user.department} | {user.jobTitle}
</p>

<p className="text-gray-700">{user.location}</p>
<div className="flex mt-4">
<Icon
styles={{ root: { fontSize: "16px" } }}
iconName="Phone"
className="mr-4 cursor-pointer"
/>
<Icon
styles={{ root: { fontSize: "16px" } }}
iconName="Mail"
className="mr-4 cursor-pointer"
/>
<Icon
styles={{ root: { fontSize: "16px" } }}
iconName="Org"
className="mr-4 cursor-pointer"
/>
</div>
</div>
</div>
</div>
</div>
<div className="mt-4">
<div className="flex justify-around border-b pb-2">
<button
onClick={() => setActiveTab("office")}
className={`py-2 px-4 focus:outline-none ${
activeTab === "office"
? "font-bold border-b-2 border-blue-500"
: ""
}`}
style={{
borderColor: activeTab === "office" ? bgColor : "",
}}
>
Office Info
</button>
<button
onClick={() => setActiveTab("personal")}
className={`py-2 px-4 focus:outline-none ${
activeTab === "personal"
? "font-bold border-b-2 border-blue-500"
: ""
}`}
style={{
borderColor: activeTab === "personal" ? bgColor : "",
}}
>
Personal Info
</button>
<button
onClick={() => setActiveTab("hr")}
className={`py-2 px-4 focus:outline-none ${
activeTab === "hr"
? "font-bold border-b-2 border-blue-500"
: ""
}`}
style={{
borderColor: activeTab === "hr" ? bgColor : "",
}}
>
HR Settings
</button>
</div>
<div className="p-4 mt-2">{renderTabContent()}</div>
</div>
{manager !== null && <div className="border border-[#ddd]"></div>}
{manager !== null && (
<div className="w-1/8 mt-2">
<Person
imageUrl={manager.image}
text={manager.name}
secondaryText={`${manager.jobTitle} | ${manager.department}`}
imageInitials={user.name[0]}
size={PersonaSize.size56}
/>
<div className="mt-4">
<div className="flex justify-around border-b pb-2">
<button
onClick={() => setActiveTab("office")}
className={`py-2 px-4 focus:outline-none ${
activeTab === "office"
? "font-bold border-b-2 border-blue-500"
: ""
}`}
style={{
borderColor: activeTab === "office" ? bgColor : "",
}}
>
Office Info
</button>
<button
onClick={() => setActiveTab("personal")}
className={`py-2 px-4 focus:outline-none ${
activeTab === "personal"
? "font-bold border-b-2 border-blue-500"
: ""
}`}
style={{
borderColor: activeTab === "personal" ? bgColor : "",
}}
>
Personal Info
</button>
<button
onClick={() => setActiveTab("hr")}
className={`py-2 px-4 focus:outline-none ${
activeTab === "hr"
? "font-bold border-b-2 border-blue-500"
: ""
}`}
style={{
borderColor: activeTab === "hr" ? bgColor : "",
}}
>
HR Settings
</button>
</div>
<div className="p-4 mt-2">{renderTabContent()}</div>
</div>
{manager !== null && <div className="border border-[#ddd]"></div>}
{manager !== null && (
<div className="w-1/8 mt-2">
<Person
imageUrl={manager.image}
text={manager.name}
secondaryText={`${manager.jobTitle} | ${manager.department}`}
imageInitials={user.name[0]}
size={PersonaSize.size56}
/>
</div>
)}
</div>
)}
</div>
</>
)}
</div>
);
Expand Down
86 changes: 19 additions & 67 deletions src/components/pages/Settings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { useState } from "react";
import { Toggle, Icon } from "@fluentui/react";
import { Icon } from "@fluentui/react";
import SearchFilters from "../settings/SearchFilters";
import Themes from "../settings/Themes";
import ManageFeatures from "../settings/ManageFeatures";
import LicenseDetails from "../settings/LicenseDetails";
import Notifications from "../settings/Notifications";

const settingsData = [
{
Expand All @@ -15,38 +18,36 @@ const settingsData = [
category: "View",
items: [
{ name: "Search Filters", icon: "Filter" },
{ name: "Show Hide Feature", icon: "Hide3" },
{ name: "Exclude Users", icon: "UserRemove" },
{ name: "Manage Features", icon: "Hide3" },
{ name: "Manage Views", icon: "View" },
],
},
{
category: "Privacy",
category: "Access Control",
items: [
{ name: "Data Sharing", icon: "DataManagement" },
{ name: "Cookies", icon: "Cookies" },
{ name: "Restricted Access", icon: "Lock" },
{ name: "Hide User Properties", icon: "FabricUserFolder" },
{ name: "Roles and Permisstions", icon: "Permissions" },
],
},
{
category: "Notifications",
items: [
{ name: "Email Alerts", icon: "Mail" },
{ name: "SMS Alerts", icon: "Message" },
{ name: "Notifications Control", icon: "Message" },
],
},
{
category: "Billing",
category: "License",
items: [
{ name: "Payment Methods", icon: "PaymentCard" },
{ name: "License Details", icon: "PaymentCard" },
{ name: "Invoices", icon: "Receipt" },
],
},
];

const Settings = () => {
const [activeSetting, setActiveSetting] = useState("Language");
const [emailAlerts, setEmailAlerts] = useState(false);
const [smsAlerts, setSmsAlerts] = useState(false);
const [dataSharing, setDataSharing] = useState(false);

const handleSettingClick = (settingName: any) => {
setActiveSetting(settingName);
Expand Down Expand Up @@ -77,61 +78,12 @@ const Settings = () => {
</div>

<div className="flex-grow p-6 bg-white overflow-y-auto max-h-screen">
<h2 className="text-2xl font-semibold mb-5">
{activeSetting && `${activeSetting}`}
</h2>

{
activeSetting === "Search Filters" && <SearchFilters/>
}

{
activeSetting === "Theme" && <Themes/>
}

{activeSetting === "Show Hide Feature" && (
<div className="bg-gray-50 p-4 rounded-md mb-4 shadow">
<div className="flex justify-between items-center border-b border-gray-300 py-2">
<label htmlFor="emailAlerts" className="font-semibold">
Show Events
</label>
<Toggle
checked={emailAlerts}
onChange={() => setEmailAlerts(!emailAlerts)}
/>
</div>

<div className="flex justify-between items-center border-b border-gray-300 py-2">
<label htmlFor="smsAlerts" className="font-semibold">
Show Dashboard
</label>
<Toggle
checked={smsAlerts}
onChange={() => setSmsAlerts(!smsAlerts)}
/>
</div>
<div className="flex justify-between items-center border-b border-gray-300 py-2">
<label htmlFor="smsAlerts" className="font-semibold">
Show Meetings
</label>
<Toggle
checked={smsAlerts}
onChange={() => setSmsAlerts(!smsAlerts)}
/>
</div>

<div className="flex justify-between items-center py-2">
<label htmlFor="dataSharing" className="font-semibold">
Show Organization Chart
</label>
<Toggle
checked={dataSharing}
onChange={() => setDataSharing(!dataSharing)}
/>
</div>
</div>
)}

<h2 className="text-2xl font-semibold mb-5">{activeSetting}</h2>
{activeSetting === "Search Filters" && <SearchFilters />}
{activeSetting === "Theme" && <Themes />}
{activeSetting === "Show Hide Feature" && <ManageFeatures />}
{activeSetting === "License Details" && <LicenseDetails/>}
{activeSetting === "Notifications Control" && <Notifications/>}
</div>
</div>
);
Expand Down
Loading

0 comments on commit d0e4809

Please sign in to comment.