Skip to content

Commit

Permalink
feat: update tambah, profile, and components
Browse files Browse the repository at this point in the history
  • Loading branch information
chowjustin committed Nov 11, 2024
1 parent 390ef69 commit b91d80b
Show file tree
Hide file tree
Showing 20 changed files with 323 additions and 390 deletions.
8 changes: 7 additions & 1 deletion src/app/(auth)/signup/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,13 @@ export default function SignUp() {
id="username"
label="Username"
placeholder="Username"
validation={{ required: "Username is required" }}
validation={{
required: "Username is required",
pattern: {
value: /^\S+$/,
message: "Username must not contain spaces",
},
}}
/>
<Input
id="email"
Expand Down
1 change: 0 additions & 1 deletion src/app/dashboard/[id]/modal/acceptModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export function AcceptModal({
return await api.post(`/sign/accept`, updatedData);
},
onSuccess: () => {
toast.success("Berhasil menandatangani dokumen!");
setResponse("submitted");
},
onError: (err) => {
Expand Down
3 changes: 1 addition & 2 deletions src/app/dashboard/[id]/modal/modifyModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export function ModifyModal({
return await api.patch(`/sign/modify`, updatedData);
},
onSuccess: () => {
toast.success("Berhasil menandatangani dokumen di posisi baru!");
setResponse("submitted");
},
onError: (err) => {
Expand Down Expand Up @@ -131,7 +130,7 @@ export function ModifyModal({
Batal
</Button>
<SubmitModal
message="Berhasil menandatangani dokumen!"
message="Berhasil menandatangani dokumen di posisi baru!"
path="/dashboard"
onSubmit={handleSubmit(onSubmit)}
onReset={reset}
Expand Down
1 change: 0 additions & 1 deletion src/app/dashboard/[id]/modal/rejectModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ export function RejectModal({
return await api.post(`/sign/reject`, updatedData);
},
onSuccess: () => {
toast.success("Berhasil menolak dokumen!");
setResponse("submitted");
},
onError: (err) => {
Expand Down
16 changes: 5 additions & 11 deletions src/app/dashboard/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,26 @@ import { ReactNode } from "react";
import { FaRegUser } from "react-icons/fa";
import { FiFileText } from "react-icons/fi";
import { IoHome } from "react-icons/io5";
import { MdRocketLaunch } from "react-icons/md";

type ChildrenLayoutProps = {
children: ReactNode;
};

const NavbarLinks = [
{
title: "Home",
title: "Dashboard",
icon: IoHome,
link: "/",
},
{
title: "Profile",
icon: FaRegUser,
link: "/dashboard/profile",
link: "/dashboard",
},
{
title: "Tambah Ajuan",
icon: FiFileText,
link: "/dashboard/tambah",
},
{
title: "Dashboard",
icon: MdRocketLaunch,
link: "/dashboard",
title: "Profile",
icon: FaRegUser,
link: "/dashboard/profile",
},
];

Expand Down
203 changes: 121 additions & 82 deletions src/app/dashboard/profile/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,103 +5,142 @@ import BreadCrumbs from "@/components/BreadCrumbs";
import NextImage from "@/components/NextImage";
import Typography from "@/components/Typography";
import withAuth from "@/components/hoc/withAuth";
import { FaPenToSquare } from "react-icons/fa6";
import { EditNameModal } from "./modals/editNameModal";
import { EditUsernameModal } from "./modals/editUsernameModal";
import { EditEmailModal } from "./modals/editEmailModal";
import { EditPasswordModal } from "./modals/editPasswordModal";
import { EditTTDModal } from "./modals/editTTDModal";
import { DeleteUserModal } from "./modals/deleteUserModal";
import Button from "@/components/buttons/Button";

const breadCrumbs = [
{ href: "/dashboard", Title: "Dashboard" },
{ href: "/dashboard/profile", Title: "Profil" },
{ href: "/dashboard/profile", Title: "Profile" },
];

export default withAuth(Profile, "user");
function Profile() {
export default withAuth(Settings, "user");
function Settings() {
const { user } = useAuthStore();

const getAccountAge = (createdDate: string): string => {
const createdAt = new Date(createdDate);
const now = new Date();

let years = now.getFullYear() - createdAt.getFullYear();
let months = now.getMonth() - createdAt.getMonth();
let days = now.getDate() - createdAt.getDate();

if (days < 0) {
months -= 1;
days += new Date(now.getFullYear(), now.getMonth(), 0).getDate();
}

if (months < 0) {
years -= 1;
months += 12;
}

return `${years} years ${months} months ${days} days`;
};

const accountAge = user?.createdAt ? getAccountAge(user.createdAt) : "N/A";

return (
<section className="pb-12 max-h-screen">
<NextImage
src="/profile/Background.png"
width={1440}
height={1024}
alt="Background"
className="w-[full] px-6 mt-6 -z-10 flex"
imgClassName="w-full h-48 mx-auto "
priority
/>
<div className="relative top-[-180px] pl-10">
<BreadCrumbs breadcrumbs={breadCrumbs} />
<span className="font-semibold text-white max-md:-pt-1">
Profil Anda
</span>
</div>

<div className="w-[90%] flex gap-4 relative rounded-lg z-10 mt-[-72px] backdrop-blur-2xl shadow-lg mx-auto p-6">
<section className="p-6">
<div className="relative w-full h-full rounded-[15px] min-h-[64px] overflow-hidden">
<NextImage
src="/profile/user.png"
width={1440}
height={1024}
src="/bgbreadcrumb.png"
width={1920}
height={1080}
alt="Background"
className="w-8 h-8 relative top-2 opacity-90 -z-10 flex"
imgClassName=""
priority
className="w-full h-full -z-10 min-h-[64px]"
imgClassName="w-full h-[64px] md:h-[80px]"
/>
<div>
<Typography className="text-[#2D3748]" variant="p" weight="black">
{user?.name}
</Typography>
<Typography className="text-[#718096]" weight="regular">
{user?.username}
</Typography>
<div className="absolute z-10 top-4 left-6 max-md:top-2 max-md:left-3 max-md:mb-0">
<BreadCrumbs breadcrumbs={breadCrumbs} />
<span className="font-semibold text-white max-md:-pt-1">Profile</span>
</div>
</div>
<div className="w-[90%] rounded-lg z-10 mt-4 space-y-4 shadow-lg mx-auto p-12 max-sm:p-4">
<div className="flex">
<Typography className="text-[#718096]" weight="bold">
Email :
</Typography>
<Typography className="text-[#A0AEC0] break-words truncate">
&nbsp;{user?.email}
</Typography>
</div>
<div className="flex">
<Typography className="text-[#718096]" weight="bold">
Account Age :
<div className="w-full border-1 rounded-[15px] z-10 mt-4 space-y-4 shadow-lg mx-auto p-12 max-sm:p-4">
<div className="space-y-4">
<Typography className="text-[#2D3748]" variant="h6" weight="bold">
Account Information
</Typography>
<Typography className="text-[#A0AEC0] break-words truncate">
&nbsp;{accountAge}
</Typography>
</div>
<div>
<Typography className="text-[#718096]" weight="bold">
Preview TTD
</Typography>

<img
src={user?.ttd}
alt="TTD Preview"
className="w-fit object-contain mt-2 rounded-lg overflow-hidden border-2 border-[#718096] p-2"
/>
<div className="flex">
<Typography className="text-[#718096] truncate">
<span className="font-bold">Nama :</span> {user?.name}
</Typography>
<div>
<EditNameModal data={user}>
{({ openModal }) => (
<FaPenToSquare
className="ml-4 mt-1 cursor-pointer text-[#718096] hover:text-hover"
onClick={openModal}
/>
)}
</EditNameModal>
</div>
</div>
<div className="flex">
<Typography className="text-[#718096] truncate">
<span className="font-bold">Username :</span> {user?.username}
</Typography>
<div>
<EditUsernameModal data={user}>
{({ openModal }) => (
<FaPenToSquare
className="ml-4 mt-1 cursor-pointer text-[#718096] hover:text-hover"
onClick={openModal}
/>
)}
</EditUsernameModal>
</div>
</div>
<div className="flex">
<Typography className="text-[#718096] truncate">
<span className="font-bold">Email :</span> {user?.email}
</Typography>
<div>
<EditEmailModal data={user}>
{({ openModal }) => (
<FaPenToSquare
className="ml-4 mt-1 cursor-pointer text-[#718096] hover:text-hover"
onClick={openModal}
/>
)}
</EditEmailModal>
</div>
</div>
<div className="flex">
<Typography className="text-[#718096] truncate">
<span className="font-bold">Password :</span> ********
</Typography>
<div>
<EditPasswordModal>
{({ openModal }) => (
<FaPenToSquare
className="ml-4 mt-1 cursor-pointer text-[#718096] hover:text-hover"
onClick={openModal}
/>
)}
</EditPasswordModal>
</div>
</div>
<div className="">
<div className="flex">
<Typography className="text-[#718096] font-bold truncate">
Preview TTD
</Typography>
<EditTTDModal>
{({ openModal }) => (
<FaPenToSquare
className="ml-4 mt-1 cursor-pointer text-[#718096] hover:text-hover"
onClick={openModal}
/>
)}
</EditTTDModal>
</div>
<div className="">
<img
src={user?.ttd}
alt="TTD Preview"
className="w-fit object-contain mt-2 rounded-lg overflow-hidden border-2 border-[#718096] p-2"
/>
</div>
</div>
<div>
<DeleteUserModal>
{({ openModal }) => (
<Button
variant="red"
size="base"
className="min-h-8 w-fit px-4 py-0.5"
onClick={openModal}
>
Delete User
</Button>
)}
</DeleteUserModal>
</div>
</div>
</div>
</section>
Expand Down
Loading

0 comments on commit b91d80b

Please sign in to comment.