From 1e4e964d72c8a6968f02df1e2c7b2a146a49b98b Mon Sep 17 00:00:00 2001 From: luqmonac56 Date: Tue, 30 Jul 2024 18:46:59 +0100 Subject: [PATCH] Create email template UI feat-Super-admin-feature-team-cyborgs --- public/images/arrow-right-up.png | Bin 0 -> 236 bytes public/images/money.png | Bin 0 -> 382 bytes public/images/person.png | Bin 0 -> 393 bytes public/images/upload-image.png | Bin 0 -> 2577 bytes .../admin/email/_components/table/index.tsx | 41 ++++++ .../email/_components/top-menu/index.tsx | 126 ++++++++++++++++++ .../(admin)/admin/email/new-template/page.tsx | 103 ++++++++++++++ .../dashboard/(admin)/admin/email/page.tsx | 117 ++++++++++++++-- 8 files changed, 377 insertions(+), 10 deletions(-) create mode 100644 public/images/arrow-right-up.png create mode 100644 public/images/money.png create mode 100644 public/images/person.png create mode 100644 public/images/upload-image.png create mode 100644 src/app/dashboard/(admin)/admin/email/_components/table/index.tsx create mode 100644 src/app/dashboard/(admin)/admin/email/_components/top-menu/index.tsx create mode 100644 src/app/dashboard/(admin)/admin/email/new-template/page.tsx diff --git a/public/images/arrow-right-up.png b/public/images/arrow-right-up.png new file mode 100644 index 0000000000000000000000000000000000000000..2997e5360e2b6d049ce9e9c81f7bf78eae670289 GIT binary patch literal 236 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#Mo$;VkP61P{ig*R6nI>Ok29AvE{)i^)I*d< zT_B&2S*2#r)7a^IQW;qi#n!M!y_Oc_{jlNO&cz}*8`y%m1=s?-W^Q@+OV5Y9Yu!86 znRkNT@8&A1J>vaQvrtPrN13HGm)78&qol`;+06)M`Gynhq literal 0 HcmV?d00001 diff --git a/public/images/money.png b/public/images/money.png new file mode 100644 index 0000000000000000000000000000000000000000..3eb778b0ac814379138cd5b345b131d04daac078 GIT binary patch literal 382 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(A!k#XUAr*{gr@rNFG7xCvS8D0E?`x1YX!2Vm z{etZkhu;F92OL&R(g!&HDX|E>nwvSfP2|!t)sLQ13*z5L2L$BBj?K=BP>#JWE1AsRYrlT>vYRWU!i*>H|6qFjncZ*b9U=v@0!v;Fu=hII>mnEv`#E29=XMQma$%jYW* za)}c6>^inJs1zM4cx(F2u~TWcreN+dy+t25k0JUn=_~yUsL>6n!@%XtBQwqv%>^$D6&+{$h{-vvhC!DgD<9=L|9a9;_taxch@bNA>>*5U3RYH z_0pY>EzIw@O-t1+)HT#ipHdrpUGk63G#^LSV^dT#v;(#%l}^mP-M(toCd0oOyeqsf z6do&n*Qj-<{p_*Q*j3j#OM1@A&s=*kCg`lZuam lH_F1_@XY9Xx%d5ZKJF{!r)zI>Ujl|4gQu&X%Q~loCIE7lovZ)= literal 0 HcmV?d00001 diff --git a/public/images/upload-image.png b/public/images/upload-image.png new file mode 100644 index 0000000000000000000000000000000000000000..8ba65fdc46eac2f596e95e609ade3ea3df21a20f GIT binary patch literal 2577 zcmV+s3hwoZP)7oV58#mhI>Fp6#E% z_r33Z?|UZdp@$y20D^WIq!x|7rM+r|WVA%0I7FMeNEeILBz6UHYuayOkv-y!lp@Zj zs`I)Kw8WI=OYb)`1L>mfr_LQs+?p0uBayxLC5f2dGJ<5bRN9R4-fBDd`?s2pDv`cJ^J7VQ&BvqECh+~V|E>Oh znf#C@NiRtwNwpI0l2ybY#WnY%fKWx)GV3KYuM;eBzMI%~@vlGpH+%e(SHAKx8JWT9 zm9#r|KWbLML>UXvs`4-bS7;iOwvq<;5r01C?r3x zKHsv$L4PrM`hQdB_FJ7oe`!N|M;}cWB?766%(>Ph zq-r~*9fI}ipGmiLFLS~T7^1N`vq&zZ4QD-_U;qaKW=$6^rU(=}llq#fOpo_O$)TxN zxz+2#=?K|$quc1kgdxS7>hm2#9P1#RNm4y7+XzvlG>-)d>{aps{xD1S`|S{vgjk?f z!Z7mHr#pr?ezQEa3f#d|+i*Z#;^Jk*s0%RgkCi+WxSzbR`B?A8`Q?xM$c1XR<4CENuziC78Hz>N50C6*Pn7ECm4e>rL)sv&HS2D{+uE-c9nLK&LLmz*Hfz zUCEO|BnPHnrM#}!j2zfC1kw`RL`NtCu8=7g*(gv)rucw%Ri5D+k*wP<7ct95~UZms4-7SNgH*eDF>MET& zb?QUf(9jSaIByQQtvC3@|8(xm|x7nyyfxH zz3Q?_96tm+41r47B0%=akId<%rCuzW?OP6SBYKk5{eE1;^L_#`Go;*p-!0H|K zdU@c4WydT!1hrA#wt#hKiXTdDY;4rsUcP)Oi^XEYe3?u}a-9b#B(!yqf8@v!*K|k_ zbQ$#B+qZAcG*wm2=IJGk2M-=JbzoTN2=55=7zl%|10f(XpU>01d-u%r)2B~Ury+FW zpu0fMjT<*?`fqG(%#=Eicj(X|voq)JED_-?RWU_Vd^v}2v%uljE57@Zy>JPzy(0s z-Me?q<9Y^itKr4X9v)u6eT11FUsGs713C<&0}Q=DAkKm3&!3y41N63G!E)vyURxv%!z!;~S2L&#(b|L}qC%aCCUNzgfkA90nS|t*Vf3B+5&3{ zLNkCn8P*&O=1Z2H*A#BQIVSEb^-u%YaR>r;8oxjw+Evpu7U%wGI{i2OW7?N0(K|~G z^nVa{XP)YFdz~l`zyG_XbUIyZe7|y9`RrZMSte)%G{_%}3!%(cr||hQ()ndZag6J{ zEhdv+FKgPLM=N=lpjdS|5Rgp%W!@??C&b`uP5Vl-*F7{}TXrCAm03oa@_kJ5TY|QE zM`mWe8R6|yRtpP4?3wY(rzk@__iCt88kPJ>*26Ou63Tm1Coi!z61SHYc`hSRmh&t) zKW2~!!>xqKMo+s@N{aE8sWiiM`mbp+r|E=6lA?hinT3>n`|Etw?v!Xd7{w z_I2vowXbGa3MN>B>a1viG}%WoQVN~QVW(J>dq&FAEKy$$D%#o9EBL7YA}ulQTTI-0 z8v%wP-f%M-pPv3ERi}`yDE3eVVTQ^ZxE*hNIF>q(Ce6I6HYKf^8h{SQTfXFKiSJ{l-5f#{XqN-4AbCsF%j1-|Z+RP|T?{K&JYg91qu6c4ab|S=(MD|VWUwBE z;A9&`quPkGmVzS$bON(qw98N>Z4E=+YB~o?>dd9uw9CNnj0n%HpV;Rb;vjWQ9@eX0 zt+-Wo1F*^)dq2_!xSAtagNkM1+^yfIT>uD(HAM3rY42&rVT}VqTe+jy@l6&nzr4$_ z-!1FAjMs&V6R(+{rF1beew%0yJ@n8+4?VO7-LiVR6~U9+{nHKHQ1?4|gki1CS`6Bl z-!gId(+%4`U+|&1XspvbDv&aMCM=DIXZi^|$P^#~ah+SvPq@o5yL2|}1;W-UNK8Q% zt)FG(DPRN^Cxzz9%^}4b{8>4E;7mJzhXx5lJTo6+unw14rj`E_2yB)MQZ_d?2Vd3* zB0SMV+Nt|2Hy9QY&*B-n=_d>}gy9Hn=RHIJo0s*+2|#zbT=^%G9?D-3>mc;igWSZ< nSds54dHe^Mw_yJz5&(Vy1?G)rEy_u<00000NkvXXu0mjfe30PI literal 0 HcmV?d00001 diff --git a/src/app/dashboard/(admin)/admin/email/_components/table/index.tsx b/src/app/dashboard/(admin)/admin/email/_components/table/index.tsx new file mode 100644 index 000000000..9282ba134 --- /dev/null +++ b/src/app/dashboard/(admin)/admin/email/_components/table/index.tsx @@ -0,0 +1,41 @@ +import { EllipsisVertical } from "lucide-react"; + +const index = async () => { + return ( +
+
+
+ +

Name

+
+

Type

+

Created Date

+

Status

+

Action

+
+ +
+
+ +

The Lemonade blender

+
+

Product

+

01-01-24

+

+ + Offline + +

+

+ +

+
+
+ ); +}; + +export default index; diff --git a/src/app/dashboard/(admin)/admin/email/_components/top-menu/index.tsx b/src/app/dashboard/(admin)/admin/email/_components/top-menu/index.tsx new file mode 100644 index 000000000..b213dc00f --- /dev/null +++ b/src/app/dashboard/(admin)/admin/email/_components/top-menu/index.tsx @@ -0,0 +1,126 @@ +"use client"; + +import { + Check, + // ChevronLeft, + // ChevronRight, + CirclePlus, + Filter, +} from "lucide-react"; +import { useRouter } from "next/navigation"; +import { useState } from "react"; + +// import { Button } from "~/components/ui/button"; +import { Button } from "~/components/common/common-button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "~/components/ui/dropdown-menu"; +import { Input } from "~/components/ui/input"; + +// import { +// Pagination, +// PaginationContent, +// PaginationEllipsis, +// PaginationItem, +// PaginationLink, +// } from "~/components/ui/pagination"; + +interface FilterDataProperties { + title: string; + selected: boolean; +} + +const filterData: FilterDataProperties[] = [ + { + title: "Active", + selected: false, + }, + + { + title: "Inactive", + selected: false, + }, +]; + +const Menu = () => { + const [selectedFilter, setSelectedFilter] = useState< + FilterDataProperties | undefined + >(); + + const router = useRouter(); + + return ( +
+
+
+
+
+ +
+ + + + + + {filterData.map((data, index) => { + const { selected, title } = data; + + selectedFilter?.title === title + ? (data.selected = true) + : (data.selected = false); + + return ( + setSelectedFilter(filterData[index])} + key={index} + > +
+
{title}
+ + +
+ + ); + })} + + +
+ +
+
+
+
+
+ ); +}; + +export default Menu; diff --git a/src/app/dashboard/(admin)/admin/email/new-template/page.tsx b/src/app/dashboard/(admin)/admin/email/new-template/page.tsx new file mode 100644 index 000000000..7ced4eb0c --- /dev/null +++ b/src/app/dashboard/(admin)/admin/email/new-template/page.tsx @@ -0,0 +1,103 @@ +"use client"; + +import uploadImage from "@/../../public/images/upload-image.png"; +import { + AlignCenter, + AlignLeft, + Bold, + Code, + Heading1, + Heading2, + Heading3, + ItalicIcon, + Link, + ListOrdered, + Pen, + StrikethroughIcon, +} from "lucide-react"; +import Image from "next/image"; +import { useRef, useState } from "react"; + +import { Button } from "~/components/common/common-button"; + +const NewTemplate = () => { + const fileUploaderReference = useRef(null); + const [picture, setPicture] = useState(""); + + const savePicture = () => { + if ( + fileUploaderReference.current !== null && + fileUploaderReference.current.files !== null + ) { + const uploadedFile = fileUploaderReference.current?.files[0]; + const cachedURL = URL?.createObjectURL(uploadedFile); + setPicture(cachedURL); + } + }; + + const handleImageUpload = () => { + if (fileUploaderReference.current !== null) { + fileUploaderReference.current.click(); + } + }; + + return ( +
+
+

Template name

+
+ +
+ + +
+
+
+ + + | + + + | + + + + + + | +
+ + ccccc +
+
+ + +
+ +
+
+ ); +}; + +export default NewTemplate; diff --git a/src/app/dashboard/(admin)/admin/email/page.tsx b/src/app/dashboard/(admin)/admin/email/page.tsx index ff6dcea39..914238df0 100644 --- a/src/app/dashboard/(admin)/admin/email/page.tsx +++ b/src/app/dashboard/(admin)/admin/email/page.tsx @@ -1,21 +1,118 @@ -import NewTemplate from "./_components/new-template/NewTemplate"; -import Toptab from "./_components/Toptab"; +"use client"; -const tabs = [ +import arrow from "@/../../public/images/arrow-right-up.png"; +import money from "@/../../public/images/money.png"; +import person from "@/../../public/images/person.png"; +import { ChevronLeft, ChevronRightIcon } from "lucide-react"; +import Image from "next/image"; + +import Table from "~/app/dashboard/(admin)/admin/email/_components/table"; +// import {Table} from "~/app/dashboard/(admin)/admin/email/_components/main-table"; +import Topmenu from "~/app/dashboard/(admin)/admin/email/_components/top-menu"; +import { Button } from "~/components/ui/button"; +import { + Pagination, + PaginationContent, + PaginationEllipsis, + PaginationItem, + PaginationLink, +} from "~/components/ui/pagination"; + +const cards = [ + { + name: "Total Templates", + value: "$45,000.00", + comment: "+20% from last month", + image: money, + }, { - name: "New Template", - value: "new", - content: , + name: "Recent Additions", + value: "4,000", + comment: "+10% from last month", + image: person, }, { - name: "Manage Template", - value: "manage", - content:
, + name: "Pending actions", + value: "$450,000.00", + comment: "+150% from last month", + image: arrow, }, ]; const page = () => { - return
{}
; + return ( +
+
+

+ Email Template Overview +

+

Showing records from the last .....

+
+
+ {cards.map((card, index) => { + return ( +
+
+

{card.name}

+

{card.value}

+ {card.comment} +
+ {card.name} +
+ ); + })} +
+ +
+ +
+
+ + + +
+

Showing 1 to 4 of 50 items

+
+ + + + + + + + 1 + + + + + 2 + + + + + 3 + + + + + + + + + + +
+
+ + ); + // < div > {< Toptab tabs = { tabs } />}; }; export default page;