Merge pull request #113 from BaniHillabi/master

fix(frontend): fix ui bugs
mokletdev · Jul 11, 2024 · fc5cc5a · fc5cc5a
2 parents 8cd7e17 + d1d9ecb
commit fc5cc5a
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 14 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    experimental:{
+        serverActions:{
+            bodySizeLimit:'5mb'
+        }
+    }
+};
 
 export default nextConfig;
diff --git a/src/actions/registrationForm.ts b/src/actions/registrationForm.ts
@@ -19,7 +19,7 @@ export default async function submitFormRegistrasi(
   const tipe_pembayaran = data.get("tipe-pembayaran") as string;
   const no_pelatih = data.get("no-pelatih") as string;
 
-  const timCount = (await findTims({ jenjang: jenjang })).length;
+  const timCount = (await findTims({ jenjang: jenjang, confirmed: true })).length;
 
   if (timCount >= 30)
     return { success: false, message: `Kuota jenjang ${jenjang} telah penuh!` };

diff --git a/src/app/(main)/dashboard/components/ProfileTim.tsx b/src/app/(main)/dashboard/components/ProfileTim.tsx
@@ -5,6 +5,7 @@ import SectionWrapper from "@/app/components/global/Wrapper";
 import { TimWithRelations } from "@/types/entityRelations";
 import { ReactNode, useState } from "react";
 import { AnggotaCard } from "./parts/AnggotaCard";
+import cn from "@/lib/clsx";
 
 const rowsMapNormal = [
   ["b1s1", "b1s2", "b1s3"],
@@ -24,9 +25,9 @@ const sizeMap = {
   NORMAL: 15,
 };
 
-function AnggotaCardsWrapper({ children }: Readonly<{ children: ReactNode }>) {
+function AnggotaCardsWrapper({ children,className }: Readonly<{ children: ReactNode,className?:string }>) {
   return (
-    <div className="flex items-center justify-center gap-16">{children}</div>
+    <div className={cn("flex items-center justify-center gap-16 ", className)}>{children}</div>
   );
 }
 
@@ -61,7 +62,7 @@ function TimLayout({ tim }: Readonly<{ tim: TimWithRelations }>) {
 
           <div className="pb-20">
           {tim.jenjang === "SMP" && (
-            <AnggotaCardsWrapper>
+            <AnggotaCardsWrapper className="flex flex-wrap gap-10">
               <AnggotaCard
                 href={`/dashboard/anggota/cerdas_cermat1`}
                 image={
@@ -81,7 +82,7 @@ function TimLayout({ tim }: Readonly<{ tim: TimWithRelations }>) {
             </AnggotaCardsWrapper>
           )}
         </div>
-        <AnggotaCardsWrapper>
+        <AnggotaCardsWrapper className="flex flex-wrap gap-10">
           <AnggotaCard
             href={`/dashboard/anggota/danton`}
             image={danton?.foto ?? "/placeholder-profile-picture.jpg"}
@@ -105,7 +106,7 @@ function TimLayout({ tim }: Readonly<{ tim: TimWithRelations }>) {
         </AnggotaCardsWrapper>
         {tim.tipe_tim === "NORMAL"
         ? rowsMapNormal.map((row, i) => (
-          <AnggotaCardsWrapper key={i}>
+          <AnggotaCardsWrapper key={i} className="flex flex-wrap gap-10">
           {row.map((pos, i) => {
                   const anggotaInPos = anggotas.find(
                     (value) => value.posisi === pos.toUpperCase()
@@ -126,7 +127,7 @@ function TimLayout({ tim }: Readonly<{ tim: TimWithRelations }>) {
                 </AnggotaCardsWrapper>
               ))
               : rowsMapSmall.map((row, i) => (
-                <AnggotaCardsWrapper key={i}>
+                <AnggotaCardsWrapper key={i} className="flex flex-wrap gap-10">
                 {row.map((pos, i) => {
                   const anggotaInPos = anggotas.find(
                     (value) => value.posisi === pos.toUpperCase()
@@ -188,7 +189,11 @@ export default function ProfileTim({
             {tim.confirmed ? "Sudah" : "Belum"}
           </P>
         </div>
-        <TimLayout tim={tim} />
+        {tim.confirmed ?  <TimLayout tim={tim} /> : (
+        <SectionWrapper className="!pt-[100px] flex items-center justify-center">
+          <H3 className="text-center">Silahkan untuk menunggu konfirmasi pembayaran dari admin</H3>
+        </SectionWrapper>
+      )}
       </div>
     </SectionWrapper>
   );

diff --git a/src/app/(main)/dashboard/components/parts/AnggotaCard.tsx b/src/app/(main)/dashboard/components/parts/AnggotaCard.tsx
@@ -19,7 +19,7 @@ export function AnggotaCard({
   return (
     <Link
       href={href}
-      className="relative flex w-1/6 items-center justify-center hover:scale-105 transition-all duration-300"
+      className="relative flex w-full sm:w-[40%] xl:w-1/6 items-center justify-center hover:scale-105 transition-all duration-300"
     >
       <Image
         src={image}

diff --git a/src/app/(main)/dashboard/components/parts/Countdown.tsx b/src/app/(main)/dashboard/components/parts/Countdown.tsx
@@ -27,7 +27,7 @@ export default function Countdown() {
   return (
     <figure className="flex flex-col gap-4">
       <H2>Waktu Tersisa Sebelum Hari-H</H2>
-      <div className="flex gap-[17px]">
+      <div className="flex gap-[17px] flex-wrap md:flex-nowrap w-full justify-center">
         <TimeFigure time={days} title="Hari" />
         <TimeFigure time={hours} title="Jam" />
         <TimeFigure time={minutes} title="Menit" />

diff --git a/src/app/(main)/dashboard/page.tsx b/src/app/(main)/dashboard/page.tsx
@@ -4,6 +4,8 @@ import { redirect } from "next/navigation";
 import Heading from "./components/Heading";
 import ProfileTim from "./components/ProfileTim";
 import { TimWithRelations } from "@/types/entityRelations";
+import { H3 } from "@/app/components/global/Text";
+import SectionWrapper from "@/app/components/global/Wrapper";
 
 export default async function TimDashboard() {
   const session = await getServerSession();

diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
@@ -9,6 +9,7 @@ export default function MainLayout({
   return (
     <>
       <Navbar />
+      {/* <div className="w-full h-[20px] xl:h-0 bg-neutral-500"></div> */}
       <main className="mt-[58px] xl:mt-[88px] overflow-hidden">
         {children}
         <Footer />

diff --git a/src/app/components/global/Navbar.tsx b/src/app/components/global/Navbar.tsx
@@ -36,7 +36,7 @@ export default function Navbar() {
   }, [pathname]);
 
   return (
-    <nav className="w-full -mt-[58px] xl:-mt-[88px] h-[58px] xl:h-[88px] bg-neutral-500 fixed z-[999]">
+    <nav className="-mt-[58px] xl:-mt-[88px] w-full h-[58px] xl:h-[88px] bg-neutral-500 fixed z-[999]">
       <div className="flex items-center justify-between px-[30px] xl:px-[50px] py-[22px] h-full">
         <Link href={"/"}>
           <Image

diff --git a/src/app/components/global/SubmitButton.tsx b/src/app/components/global/SubmitButton.tsx
@@ -21,7 +21,7 @@ export default function SubmitButton({
       type="submit"
     >
       {pending ? (
-        <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
+        <div className="flex items-center justify-center">
           <Spinner className="animate-spin" />
         </div>
       ) : (
@@ -43,7 +43,7 @@ export function LoginButton({
   return (
     <PrimaryButton
       disabled={disabled}
-      className={cn("relative ", className)}
+      className={cn("relative px-6 py-3 ", className)}
       type="submit"
     >
       {disabled ? (