Organize directories

apps/link/.gitignore

@@ -0,0 +1,4 @@
+.env
+.env.local
+.next
+node_modules

apps/link/Dockerfile

@@ -0,0 +1,37 @@
+FROM node:18-bullseye-slim as builder
+LABEL maintainer="Darren Clarke <darren@redaranj.com>"
+ARG APP_DIR=/opt/link
+RUN mkdir -p ${APP_DIR}/
+COPY . ${APP_DIR}/
+RUN chown -R node ${APP_DIR}/
+USER node
+WORKDIR ${APP_DIR}
+RUN npm install
+RUN npm run build
+
+FROM node:18-bullseye-slim
+ARG BUILD_DATE
+ARG VERSION
+LABEL maintainer="Darren Clarke <darren@redaranj.com>"
+LABEL org.label-schema.build-date=$BUILD_DATE
+LABEL org.label-schema.version=$VERSION
+ARG APP_DIR=/opt/link
+ENV APP_DIR ${APP_DIR}
+
+RUN DEBIAN_FRONTEND=noninteractive apt-get update && \
+    apt-get install -y --no-install-recommends \
+    dumb-init
+RUN mkdir -p ${APP_DIR}
+RUN chown -R node ${APP_DIR}/
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+USER node
+WORKDIR ${APP_DIR}
+COPY --from=builder ${APP_DIR}/node_modules ./node_modules
+COPY --from=builder ${APP_DIR}/.next ./.next
+COPY --from=builder ${APP_DIR}/next.config.js ./next.config.js
+EXPOSE 3000
+ENV PORT 3000
+ENV NODE_ENV production
+COPY package.json ./
+ENTRYPOINT ["/docker-entrypoint.sh"]

apps/link/LICENSE.md

@@ -0,0 +1,616 @@
+### GNU AFFERO GENERAL PUBLIC LICENSE
+
+Version 3, 19 November 2007
+
+Copyright (C) 2007 Free Software Foundation, Inc.
+<https://fsf.org/>
+
+Everyone is permitted to copy and distribute verbatim copies of this
+license document, but changing it is not allowed.
+
+### Preamble
+
+The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works. By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains
+free software for all its users.
+
+When we speak of free software, we are referring to freedom, not
+price. Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate. Many developers of free software are heartened and
+encouraged by the resulting cooperation. However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community. It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server. Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals. This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing
+under this license.
+
+The precise terms and conditions for copying, distribution and
+modification follow.
+
+### TERMS AND CONDITIONS
+
+#### 0. Definitions.
+
+"This License" refers to version 3 of the GNU Affero General Public
+License.
+
+"Copyright" also means copyright-like laws that apply to other kinds
+of works, such as semiconductor masks.
+
+"The Program" refers to any copyrightable work licensed under this
+License. Each licensee is addressed as "you". "Licensees" and
+"recipients" may be individuals or organizations.
+
+To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of
+an exact copy. The resulting work is called a "modified version" of
+the earlier work or a work "based on" the earlier work.
+
+A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy. Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies. Mere interaction with a user
+through a computer network, with no transfer of a copy, is not
+conveying.
+
+An interactive user interface displays "Appropriate Legal Notices" to
+the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License. If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+#### 1. Source Code.
+
+The "source code" for a work means the preferred form of the work for
+making modifications to it. "Object code" means any non-source form of
+a work.
+
+A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form. A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities. However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work. For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+The Corresponding Source need not include anything that users can
+regenerate automatically from other parts of the Corresponding Source.
+
+The Corresponding Source for a work in source code form is that same
+work.
+
+#### 2. Basic Permissions.
+
+All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met. This License explicitly affirms your unlimited
+permission to run the unmodified Program. The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work. This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+You may make, run and propagate covered works that you do not convey,
+without conditions so long as your license otherwise remains in force.
+You may convey covered works to others for the sole purpose of having
+them make modifications exclusively for you, or provide you with
+facilities for running those works, provided that you comply with the
+terms of this License in conveying all material for which you do not
+control copyright. Those thus making or running the covered works for
+you must do so exclusively on your behalf, under your direction and
+control, on terms that prohibit them from making any copies of your
+copyrighted material outside their relationship with you.
+
+Conveying under any other circumstances is permitted solely under the
+conditions stated below. Sublicensing is not allowed; section 10 makes
+it unnecessary.
+
+#### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such
+circumvention is effected by exercising rights under this License with
+respect to the covered work, and you disclaim any intention to limit
+operation or modification of the work as a means of enforcing, against
+the work's users, your or third parties' legal rights to forbid
+circumvention of technological measures.
+
+#### 4. Conveying Verbatim Copies.
+
+You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+#### 5. Conveying Modified Source Versions.
+
+You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these
+conditions:
+
+-   a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+-   b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under
+    section 7. This requirement modifies the requirement in section 4
+    to "keep intact all notices".
+-   c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy. This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged. This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+-   d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit. Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+#### 6. Conveying Non-Source Forms.
+
+You may convey a covered work in object code form under the terms of
+sections 4 and 5, provided that you also convey the machine-readable
+Corresponding Source under the terms of this License, in one of these
+ways:
+
+-   a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+-   b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the Corresponding
+    Source from a network server at no charge.
+-   c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source. This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+-   d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge. You need not require recipients to copy the
+    Corresponding Source along with the object code. If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source. Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+-   e) Convey the object code using peer-to-peer transmission,
+    provided you inform other peers where the object code and
+    Corresponding Source of the work are being offered to the general
+    public at no charge under subsection 6d.
+
+A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal,
+family, or household purposes, or (2) anything designed or sold for
+incorporation into a dwelling. In determining whether a product is a
+consumer product, doubtful cases shall be resolved in favor of
+coverage. For a particular product received by a particular user,
+"normally used" refers to a typical or common use of that class of
+product, regardless of the status of the particular user or of the way
+in which the particular user actually uses, or expects or is expected
+to use, the product. A product is a consumer product regardless of
+whether the product has substantial commercial, industrial or
+non-consumer uses, unless such uses represent the only significant
+mode of use of the product.
+
+"Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to
+install and execute modified versions of a covered work in that User
+Product from a modified version of its Corresponding Source. The
+information must suffice to ensure that the continued functioning of
+the modified object code is in no case prevented or interfered with
+solely because modification has been made.
+
+If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information. But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or
+updates for a work that has been modified or installed by the
+recipient, or for the User Product in which it has been modified or
+installed. Access to a network may be denied when the modification
+itself materially and adversely affects the operation of the network
+or violates the rules and protocols for communication across the
+network.
+
+Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+#### 7. Additional Terms.
+
+"Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law. If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it. (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.) You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders
+of that material) supplement the terms of this License with terms:
+
+-   a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+-   b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+-   c) Prohibiting misrepresentation of the origin of that material,
+    or requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+-   d) Limiting the use for publicity purposes of names of licensors
+    or authors of the material; or
+-   e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+-   f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions
+    of it) with contractual assumptions of liability to the recipient,
+    for any liability that these contractual assumptions directly
+    impose on those licensors and authors.
+
+All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10. If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term. If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions; the
+above requirements apply either way.
+
+#### 8. Termination.
+
+You may not propagate or modify a covered work except as expressly
+provided under this License. Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+However, if you cease all violation of this License, then your license
+from a particular copyright holder is reinstated (a) provisionally,
+unless and until the copyright holder explicitly and finally
+terminates your license, and (b) permanently, if the copyright holder
+fails to notify you of the violation by some reasonable means prior to
+60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License. If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+#### 9. Acceptance Not Required for Having Copies.
+
+You are not required to accept this License in order to receive or run
+a copy of the Program. Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance. However,
+nothing other than this License grants you permission to propagate or
+modify any covered work. These actions infringe copyright if you do
+not accept this License. Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+#### 10. Automatic Licensing of Downstream Recipients.
+
+Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License. You are not responsible
+for enforcing compliance by third parties with this License.
+
+An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations. If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License. For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+#### 11. Patents.
+
+A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based. The
+work thus licensed is called the contributor's "contributor version".
+
+A contributor's "essential patent claims" are all patent claims owned
+or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version. For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement). To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients. "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+A patent license is "discriminatory" if it does not include within the
+scope of its coverage, prohibits the exercise of, or is conditioned on
+the non-exercise of one or more of the rights that are specifically
+granted under this License. You may not convey a covered work if you
+are a party to an arrangement with a third party that is in the
+business of distributing software, under which you make payment to the
+third party based on the extent of your activity of conveying the
+work, and under which the third party grants, to any of the parties
+who would receive the covered work from you, a discriminatory patent
+license (a) in connection with copies of the covered work conveyed by
+you (or copies made from those copies), or (b) primarily for and in
+connection with specific products or compilations that contain the
+covered work, unless you entered into that arrangement, or that patent
+license was granted, prior to 28 March 2007.
+
+Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+#### 12. No Surrender of Others' Freedom.
+
+If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License. If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under
+this License and any other pertinent obligations, then as a
+consequence you may not convey it at all. For example, if you agree to
+terms that obligate you to collect a royalty for further conveying
+from those to whom you convey the Program, the only way you could
+satisfy both those terms and this License would be to refrain entirely
+from conveying the Program.
+
+#### 13. Remote Network Interaction; Use with the GNU General Public License.
+
+Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your
+version supports such interaction) an opportunity to receive the
+Corresponding Source of your version by providing access to the
+Corresponding Source from a network server at no charge, through some
+standard or customary means of facilitating copying of software. This
+Corresponding Source shall include the Corresponding Source for any
+work covered by version 3 of the GNU General Public License that is
+incorporated pursuant to the following paragraph.
+
+Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work. The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+#### 14. Revised Versions of this License.
+
+The Free Software Foundation may publish revised and/or new versions
+of the GNU Affero General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+Each version is given a distinguishing version number. If the Program
+specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation. If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever
+published by the Free Software Foundation.
+
+If the Program specifies that a proxy can decide which future versions
+of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+Later license versions may give you additional or different
+permissions. However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+#### 15. Disclaimer of Warranty.
+
+THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
+WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
+PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
+DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
+CORRECTION.
+
+#### 16. Limitation of Liability.
+
+IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
+CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
+ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
+NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
+LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
+TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
+PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
+
+#### 17. Interpretation of Sections 15 and 16.
+
+If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+END OF TERMS AND CONDITIONS

apps/link/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/link/components/Button.tsx

@@ -0,0 +1,29 @@
+import { FC } from "react";
+import Link from "next/link";
+import { Button as MUIButton } from "@mui/material";
+
+interface ButtonProps {
+  text: string;
+  color: string;
+  href: string;
+}
+
+export const Button: FC<ButtonProps> = ({ text, color, href }) => (
+  <Link href={href} passHref>
+    <MUIButton
+      variant="contained"
+      disableElevation
+      sx={{
+        fontFamily: "Poppins, sans-serif",
+        fontWeight: 700,
+        borderRadius: 999,
+        backgroundColor: color,
+        padding: "6px 30px",
+        margin: "20px 0px",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {text}
+    </MUIButton>
+  </Link>
+);

apps/link/components/Layout.tsx

@@ -0,0 +1,19 @@
+import { FC, useState } from "react";
+import { Grid } from "@mui/material";
+import { Sidebar } from "./Sidebar";
+
+export const Layout = ({ children }) => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <Grid container direction="row">
+      <Sidebar open={open} setOpen={setOpen} />
+      <Grid
+        item
+        sx={{ ml: open ? "270px" : "100px", width: "100%", height: "100vh" }}
+      >
+        {children}
+      </Grid>
+    </Grid>
+  );
+};

apps/link/components/Sidebar.tsx

@@ -0,0 +1,514 @@
+import { FC, useState } from "react";
+import {
+  Box,
+  Grid,
+  Typography,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListItemSecondaryAction,
+  Drawer,
+  Collapse,
+} from "@mui/material";
+import {
+  FeaturedPlayList as FeaturedPlayListIcon,
+  Person as PersonIcon,
+  Analytics as AnalyticsIcon,
+  Logout as LogoutIcon,
+  Cottage as CottageIcon,
+  Settings as SettingsIcon,
+  ExpandCircleDown as ExpandCircleDownIcon,
+} from "@mui/icons-material";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import Image from "next/image";
+import LinkLogo from "public/link-logo-small.png";
+
+const openWidth = 270;
+const closedWidth = 100;
+
+const MenuItem = ({
+  name,
+  href,
+  Icon,
+  iconSize,
+  inset = false,
+  selected = false,
+  open = true,
+  badge,
+}: any) => (
+  <Link href={href}>
+    <ListItemButton
+      sx={{
+        p: 0,
+        mb: 1,
+        bl: iconSize === 0 ? "1px solid white" : "inherit",
+      }}
+      selected={selected}
+    >
+      {iconSize > 0 ? (
+        <ListItemIcon
+          sx={{
+            color: `white`,
+            minWidth: 0,
+            mr: 2,
+            textAlign: "center",
+            margin: open ? "0 8 0 0" : "0 auto",
+          }}
+        >
+          <Box
+            sx={{
+              width: iconSize,
+              height: iconSize,
+              mr: 0.5,
+              mt: "-4px",
+            }}
+          >
+            <Icon />
+          </Box>
+        </ListItemIcon>
+      ) : (
+        <Box
+          sx={{
+            width: 30,
+            height: "28px",
+            position: "relative",
+            ml: "9px",
+            mr: "1px",
+          }}
+        >
+          <Box
+            sx={{
+              width: "1px",
+              height: "56px",
+              backgroundColor: "white",
+              position: "absolute",
+              left: "3px",
+              top: "-10px",
+            }}
+          />
+          <Box
+            sx={{
+              width: "42px",
+              height: "42px",
+              position: "absolute",
+              top: "-27px",
+              left: "3px",
+              border: "solid 1px #fff",
+              borderColor: "transparent transparent transparent #fff",
+              borderRadius: "60px",
+              rotate: "-35deg",
+            }}
+          />
+        </Box>
+      )}
+      {open && (
+        <ListItemText
+          inset={inset}
+          primary={
+            <Typography
+              variant="body1"
+              sx={{
+                fontSize: 16,
+                fontFamily: "Roboto",
+                fontWeight: "bold",
+                border: 0,
+                textAlign: "left",
+              }}
+            >
+              {name}
+            </Typography>
+          }
+        />
+      )}
+      {badge && (
+        <ListItemSecondaryAction>
+          <Typography
+            color="textSecondary"
+            variant="body1"
+            className="badge"
+            sx={{
+              backgroundColor: "#FFB620",
+              color: "black !important",
+              borderRadius: 10,
+              px: 1,
+              fontSize: 12,
+              fontWeight: "bold",
+            }}
+          >
+            {badge}
+          </Typography>
+        </ListItemSecondaryAction>
+      )}
+    </ListItemButton>
+  </Link>
+);
+
+interface SidebarProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const Sidebar: FC<SidebarProps> = ({ open, setOpen }) => {
+  const { pathname } = useRouter();
+  const [username, setUsername] = useState("Nicholas Smith");
+
+  return (
+    <Drawer
+      sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
+      variant="permanent"
+      anchor="left"
+      open={open}
+      PaperProps={{
+        sx: {
+          width: open ? openWidth : closedWidth,
+          border: 0,
+          overflow: "visible",
+        },
+      }}
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          top: 20,
+          right: open ? -8 : -16,
+          color: "#1C75FD",
+          rotate: open ? "90deg" : "-90deg",
+        }}
+        onClick={() => {
+          setOpen!(!open);
+        }}
+      >
+        <ExpandCircleDownIcon
+          sx={{
+            width: 30,
+            height: 30,
+            background: "white",
+            borderRadius: 500,
+          }}
+        />
+      </Box>
+      <Grid
+        container
+        direction="column"
+        justifyContent="space-between"
+        wrap="nowrap"
+        sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
+      >
+        <Grid item container>
+          <Grid item sx={{ width: open ? "40px" : "100%" }}>
+            <Box
+              sx={{
+                width: "40px",
+                height: "40px",
+                margin: open ? "0" : "0 auto",
+              }}
+            >
+              <Image
+                src={LinkLogo}
+                alt="Link logo"
+                width={40}
+                height={40}
+                style={{
+                  objectFit: "cover",
+                  filter: "grayscale(100) brightness(100)",
+                }}
+              />
+            </Box>
+            .
+          </Grid>
+          {open && (
+            <Grid item>
+              <Typography
+                variant="h2"
+                sx={{
+                  fontSize: 26,
+                  color: "white",
+                  fontWeight: 700,
+                  mt: 1,
+                  ml: 0.5,
+                  fontFamily: "Poppins",
+                }}
+              >
+                CDR Link
+              </Typography>
+            </Grid>
+          )}
+        </Grid>
+        <Grid item>
+          <Box
+            sx={{
+              height: "0.5px",
+              width: "100%",
+              backgroundColor: "#666",
+              mb: 1,
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <Typography
+            variant="h6"
+            sx={{
+              fontSize: 12,
+              color: "#999",
+              fontWeight: "bold",
+              textAlign: open ? "left" : "center",
+            }}
+          >
+            Hello
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Typography
+            variant="h2"
+            sx={{
+              fontSize: 22,
+              color: "white",
+              mb: 1.5,
+              fontWeight: "bold",
+              textAlign: open ? "left" : "center",
+            }}
+          >
+            {open
+              ? username
+              : username
+                  .split(" ")
+                  .map((name) => name.substring(0, 1))
+                  .join("")}
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Box
+            sx={{ height: "0.5px", width: "100%", backgroundColor: "#666" }}
+          />
+        </Grid>
+        <Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
+          <List
+            component="nav"
+            sx={{
+              a: {
+                textDecoration: "none",
+
+                ".MuiListItemButton-root": {
+                  p: 1,
+                  borderRadius: 2,
+                  "&:hover": {
+                    background: "#555",
+                  },
+                  ".MuiTypography-root": {
+                    p: {
+                      color: "#999 !important",
+                      fontSize: 16,
+                    },
+                  },
+                  ".badge": {
+                    p: { fontSize: 12, color: "black !important" },
+                  },
+                },
+                ".Mui-selected": {
+                  background: "#444",
+                  color: "#fff !important",
+                  ".MuiTypography-root": {
+                    p: {
+                      color: "#fff !important",
+                      fontSize: 16,
+                    },
+                  },
+                  ".badge": {
+                    p: { fontSize: 12, color: "black !important" },
+                  },
+                },
+              },
+            }}
+          >
+            <MenuItem
+              name="Home"
+              href="/"
+              Icon={CottageIcon}
+              iconSize={20}
+              selected={pathname.endsWith("/")}
+              open={open}
+            />
+            <MenuItem
+              name="Tickets"
+              href="/tickets/assigned"
+              Icon={FeaturedPlayListIcon}
+              selected={pathname.startsWith("/tickets")}
+              iconSize={20}
+              open={open}
+            />
+
+            <Collapse
+              in={pathname.startsWith("/tickets")}
+              timeout="auto"
+              unmountOnExit
+              onClick={undefined}
+            >
+              <List component="div" disablePadding>
+                <MenuItem
+                  name="Assigned"
+                  href="/tickets/assigned"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/assigned")}
+                  badge={3}
+                  open={open}
+                />
+                <MenuItem
+                  name="Urgent"
+                  href="/tickets/urgent"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/urgent")}
+                  badge={1}
+                  open={open}
+                />
+                <MenuItem
+                  name="Pending"
+                  href="/tickets/pending"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/pending")}
+                  badge={9}
+                  open={open}
+                />
+                <MenuItem
+                  name="Unassigned"
+                  href="/tickets/unassigned"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/unnassigned")}
+                  badge={27}
+                  open={open}
+                />
+                <MenuItem
+                  name="New Ticket UI"
+                  href="/tickets/181"
+                  Icon={SettingsIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/tickets/181")}
+                  open={open}
+                />
+              </List>
+            </Collapse>
+
+            <MenuItem
+              name="Leafcutter"
+              href="/leafcutter"
+              Icon={AnalyticsIcon}
+              iconSize={20}
+              selected={pathname.endsWith("/leafcutter")}
+              open={open}
+            />
+            <Collapse
+              in={pathname.startsWith("/leafcutter")}
+              timeout="auto"
+              unmountOnExit
+              onClick={undefined}
+            >
+              <List component="div" disablePadding>
+                <MenuItem
+                  name="Dashboard"
+                  href="/leafcutter"
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter")}
+                  open={open}
+                />
+
+                <MenuItem
+                  name="Search and Create"
+                  href="/leafcutter/create"
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter/create")}
+                  open={open}
+                />
+
+                <MenuItem
+                  name="Trends"
+                  href="/leafcutter/trends"
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter/trends")}
+                  open={open}
+                />
+
+                <MenuItem
+                  name="FAQ"
+                  href="/leafcutter/faq"
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter/faq")}
+                  open={open}
+                />
+
+                <MenuItem
+                  name="About"
+                  href="/leafcutter/about"
+                  Icon={AnalyticsIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/leafcutter/about")}
+                  open={open}
+                />
+              </List>
+            </Collapse>
+            <MenuItem
+              name="Profile"
+              href="/profile"
+              Icon={PersonIcon}
+              iconSize={20}
+              selected={pathname.endsWith("/profile")}
+              open={open}
+            />
+            <MenuItem
+              name="Admin"
+              href="/admin/zammad"
+              Icon={SettingsIcon}
+              iconSize={20}
+              open={open}
+            />
+            <Collapse
+              in={pathname.startsWith("/admin/")}
+              timeout="auto"
+              unmountOnExit
+              onClick={undefined}
+            >
+              <List component="div" disablePadding>
+                <MenuItem
+                  name="Zammad Settings"
+                  href="/admin/zammad"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/admin/zammad")}
+                  open={open}
+                />
+                <MenuItem
+                  name="Metamigo"
+                  href="/admin/metamigo"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/admin/metamigo")}
+                  open={open}
+                />
+                <MenuItem
+                  name="Label Studio"
+                  href="/admin/label-studio"
+                  Icon={FeaturedPlayListIcon}
+                  iconSize={0}
+                  selected={pathname.endsWith("/admin/label-studio")}
+                  open={open}
+                />
+              </List>
+            </Collapse>
+
+            <MenuItem
+              name="Logout"
+              href="/logout"
+              Icon={LogoutIcon}
+              iconSize={20}
+              open={open}
+            />
+          </List>
+        </Grid>
+      </Grid>
+    </Drawer>
+  );
+};

apps/link/components/TicketDetail.tsx

@@ -0,0 +1,142 @@
+import { FC, useEffect } from "react";
+import { Grid, Box, Typography, Button } from "@mui/material";
+import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+import {
+  MainContainer,
+  ChatContainer,
+  MessageList,
+  Message,
+  MessageInput,
+  Conversation,
+  ConversationHeader,
+} from "@chatscope/chat-ui-kit-react";
+
+interface TicketDetailProps {
+  ticket: any;
+  articles: any[];
+}
+
+export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
+  console.log({ here: "here", ticket });
+  return (
+    <>
+      <MainContainer>
+        <ChatContainer>
+          <ConversationHeader>
+            <ConversationHeader.Content>
+              <Box
+                sx={{
+                  width: "100%",
+
+                  textAlign: "center",
+                  fontWeight: "bold",
+                }}
+              >
+                <Typography
+                  variant="h5"
+                  sx={{ fontFamily: "Poppins", fontWeight: 700 }}
+                >
+                  {ticket.title}
+                </Typography>
+                <Typography
+                  variant="h6"
+                  sx={{ fontFamily: "Roboto", fontWeight: 400 }}
+                >{`Ticket #${ticket.number} (created ${new Date(
+                  ticket.created_at
+                ).toLocaleDateString()})`}</Typography>
+              </Box>
+            </ConversationHeader.Content>
+          </ConversationHeader>
+          <MessageList style={{ marginBottom: 80 }}>
+            {articles.map((article: any) => (
+              <Message
+                className={
+                  article.internal
+                    ? "internal-note"
+                    : article.sender === "Agent"
+                    ? "outgoing-message"
+                    : "incoming-message"
+                }
+                model={{
+                  message: article.body.replace(/<div>*<br>*<div>/g, ""),
+                  sentTime: article.updated_at,
+                  sender: article.from,
+                  direction:
+                    article.sender === "Agent" ? "outgoing" : "incoming",
+                  position: "last",
+                  type: "html",
+                }}
+              />
+            ))}
+          </MessageList>
+          {/* <MessageInput
+          placeholder="Type message here"
+          sendOnReturnDisabled
+          attachButton={false}
+          sendButton={false}
+            /> */}
+        </ChatContainer>
+        <Box
+          sx={{
+            height: 80,
+            background: "#eeeeee",
+            borderTop: "1px solid #ddd",
+            position: "absolute",
+            bottom: 0,
+            width: "100%",
+            zIndex: 1000,
+          }}
+        >
+          <Grid
+            container
+            spacing={4}
+            justifyContent="center"
+            alignItems="center"
+            alignContent={"center"}
+            sx={{ height: 72 }}
+          >
+            <Grid item>
+              <Button
+                variant="contained"
+                disableElevation
+                sx={{
+                  fontFamily: "Poppins, sans-serif",
+                  fontWeight: 700,
+                  borderRadius: 2,
+                  textTransform: "none",
+                  backgroundColor: "#1982FC",
+                  padding: "6px 30px",
+                  margin: "20px 0px",
+                  whiteSpace: "nowrap",
+                  py: "10px",
+                }}
+              >
+                Reply to ticket
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                variant="contained"
+                disableElevation
+                sx={{
+                  fontFamily: "Poppins, sans-serif",
+                  fontWeight: 700,
+                  borderRadius: 2,
+                  textTransform: "none",
+                  color: "black",
+                  backgroundColor: "#FFB620",
+                  padding: "6px 30px",
+                  margin: "20px 0px",
+                  whiteSpace: "nowrap",
+                  py: "10px",
+                }}
+              >
+                Write note to agent
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+      </MainContainer>
+    </>
+  );
+};

apps/link/components/TicketEdit.tsx

@@ -0,0 +1,75 @@
+import { FC, useEffect } from "react";
+import { Grid, Box, Typography, TextField } from "@mui/material";
+import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+import {
+  MainContainer,
+  ChatContainer,
+  MessageList,
+  Message,
+  MessageInput,
+  Conversation,
+  ConversationHeader,
+} from "@chatscope/chat-ui-kit-react";
+
+interface TicketEditProps {
+  ticket: any;
+}
+
+export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
+  return (
+    <Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
+      <Grid container direction="column" spacing={3}>
+        <Grid item>
+          <TextField
+            label="Group"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <TextField
+            label="Owner"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <TextField
+            label="State"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <TextField
+            label="Priority"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+        <Grid item>
+          <TextField
+            label="Tags"
+            size="small"
+            sx={{
+              width: "100%",
+              fieldset: { backgroundColor: "white" },
+            }}
+          />
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};

apps/link/components/ZammadWrapper.tsx

@@ -0,0 +1,49 @@
+import { FC, useState } from "react";
+import Iframe from "react-iframe";
+
+type ZammadWrapperProps = {
+  url: string;
+  hideSidebar?: boolean;
+};
+
+export const ZammadWrapper: FC<ZammadWrapperProps> = ({
+  url,
+  hideSidebar = true,
+}) => {
+  const [display, setDisplay] = useState("inherit");
+
+  return (
+    <Iframe
+      id="link"
+      url={url}
+      width="100%"
+      height="100%"
+      frameBorder={0}
+      styles={{ display }}
+      onLoad={() => {
+        const linkElement = document.querySelector("iframe");
+        if (
+          linkElement.contentDocument &&
+          linkElement.contentDocument?.querySelector &&
+          linkElement.contentDocument.querySelector("#navigation") &&
+          linkElement.contentDocument.querySelector("body") &&
+          linkElement.contentDocument.querySelector(".sidebar")
+        ) {
+          // @ts-ignore
+          linkElement.contentDocument.querySelector("#navigation").style =
+            "display: none";
+          // @ts-ignore
+          linkElement.contentDocument.querySelector("body").style =
+            "font-family: Arial";
+
+          if (hideSidebar) {
+            // @ts-ignore
+            linkElement.contentDocument.querySelector(".sidebar").style =
+              "display: none";
+          }
+        }
+        setDisplay("inherit");
+      }}
+    />
+  );
+};

apps/link/compose-dev.yaml

@@ -0,0 +1,11 @@
+services:
+  app:
+    entrypoint:
+    - sleep
+    - infinity
+    image: registry.gitlab.com/redaranj/dev-environment:latest
+    init: true
+    volumes:
+    - type: bind
+      source: /var/run/docker.sock
+      target: /var/run/docker.sock

apps/link/docker-entrypoint.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+set -e
+
+cd ${APP_DIR}
+echo "starting shell app"
+exec dumb-init npm run start

apps/link/lib/checkAuth.ts

@@ -0,0 +1,21 @@
+import { GetServerSideProps, GetServerSidePropsContext } from "next";
+import { getSession } from "next-auth/react";
+
+export const checkAuth: GetServerSideProps = async (
+  context: GetServerSidePropsContext
+) => {
+  const session = await getSession(context);
+
+  if (!session) {
+    return {
+      redirect: {
+        destination: "/login",
+        permanent: false,
+      },
+    };
+  }
+
+  return {
+    props: { session },
+  };
+};

apps/link/lib/createEmotionCache.ts

@@ -0,0 +1,5 @@
+import createCache from "@emotion/cache";
+
+export default function createEmotionCache() {
+  return createCache({ key: "css" });
+}

apps/link/middleware.ts

@@ -0,0 +1,29 @@
+// middleware.ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+// This function can be marked `async` if using `await` inside
+export function middleware(request: NextRequest) {
+  console.log("INTO middleware")
+  const path = request.nextUrl.pathname
+  console.log({ path })
+  if (path.startsWith('/zammad')) {
+    console.log("INTO middleware 2")
+    const finalURL = new URL(path.replace("/zammad", ""), process.env.ZAMMAD_URL)
+    console.log(finalURL.toString())
+
+    const requestHeaders = new Headers()
+    requestHeaders.set('X-Forwarded-User', 'darren@redaranj.com')
+    requestHeaders.set('Host', 'zammad.example.com')
+
+    console.log(requestHeaders)
+    return NextResponse.rewrite(finalURL, {
+      request: {
+        headers: requestHeaders
+      }
+    })
+  } else {
+    console.log("INTO middleware 3")
+    return NextResponse.next()
+  }
+}

apps/link/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/link/next.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  i18n: {
+    locales: ["en", "fr"],
+    defaultLocale: "en",
+  },
+  async redirects() {
+    return [
+      {
+        source: "/zammad#ticket/zoom/:path*",
+        destination: "/ticket/:path*",
+        permanent: true,
+      },
+    ];
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/zammad",
+        destination: `http://link-shell-zammad-proxy-1:3000`,
+      },
+      {
+        source: "/zammad/:path*",
+        destination: `http://link-shell-zammad-proxy-1:3000/:path*`,
+      },
+    ];
+  },
+};

apps/link/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "link-shell",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "export": "next export",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@chatscope/chat-ui-kit-react": "^1.10.1",
+    "@chatscope/chat-ui-kit-styles": "^1.4.0",
+    "@emotion/cache": "^11.10.5",
+    "@emotion/react": "^11.10.5",
+    "@emotion/server": "^11.10.0",
+    "@emotion/styled": "^11.10.5",
+    "@fontsource/playfair-display": "^4.5.13",
+    "@fontsource/poppins": "^4.5.10",
+    "@fontsource/roboto": "^4.5.8",
+    "@mui/icons-material": "^5",
+    "@mui/lab": "^5.0.0-alpha.118",
+    "@mui/material": "^5",
+    "@mui/x-data-grid-pro": "^5.17.22",
+    "@mui/x-date-pickers-pro": "^5.0.17",
+    "date-fns": "^2.29.3",
+    "http-proxy-middleware": "^2.0.6",
+    "material-ui-popup-state": "^5.0.4",
+    "next": "^13.1",
+    "next-auth": "^4.19.2",
+    "next-http-proxy-middleware": "^1.2.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-iframe": "^1.8.5",
+    "react-polyglot": "^0.7.2",
+    "swr": "^2.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@types/react": "^18",
+    "@types/uuid": "^9.0.0",
+    "babel-loader": "^9.1.2",
+    "eslint": "^8.33.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-next": "^13.1.6",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "typescript": "^4.9.5"
+  }
+}

apps/link/pages/_app.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { AppProps } from "next/app";
+import { SessionProvider } from "next-auth/react";
+import { CssBaseline } from "@mui/material";
+import { CacheProvider, EmotionCache } from "@emotion/react";
+import { AdapterDateFns } from "@mui/x-date-pickers-pro/AdapterDateFns";
+import { LocalizationProvider } from "@mui/x-date-pickers-pro";
+import createEmotionCache from "lib/createEmotionCache";
+import "@fontsource/poppins/400.css";
+import "@fontsource/poppins/700.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/700.css";
+import "@fontsource/playfair-display/900.css";
+import "styles/global.css";
+import { LicenseInfo } from "@mui/x-data-grid-pro";
+
+LicenseInfo.setLicenseKey(
+  "fd009c623acc055adb16370731be92e4T1JERVI6NDA3NTQsRVhQSVJZPTE2ODAyNTAwMTUwMDAsS0VZVkVSU0lPTj0x"
+);
+
+const clientSideEmotionCache: any = createEmotionCache();
+
+interface LinkWebProps extends AppProps {
+  // eslint-disable-next-line react/require-default-props
+  emotionCache?: EmotionCache;
+}
+
+const LinkWeb = (props: LinkWebProps) => {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+
+  return (
+    <SessionProvider session={(pageProps as any).session}>
+      <CacheProvider value={emotionCache}>
+        <CssBaseline />
+
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <Component {...pageProps} />
+        </LocalizationProvider>
+      </CacheProvider>
+    </SessionProvider>
+  );
+};
+
+export default LinkWeb;

apps/link/pages/_document.tsx

@@ -0,0 +1,50 @@
+// eslint-disable-next-line no-use-before-define
+import * as React from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import createEmotionServer from "@emotion/server/create-instance";
+import createEmotionCache from "lib/createEmotionCache";
+
+export default class LinkDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+LinkDocument.getInitialProps = async (ctx) => {
+  const originalRenderPage = ctx.renderPage;
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache as any);
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App: any) => (props) =>
+        <App emotionCache={cache} {...props} />,
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(" ")}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
+
+  return {
+    ...initialProps,
+    styles: [
+      ...React.Children.toArray(initialProps.styles),
+      ...emotionStyleTags,
+    ],
+  };
+};

apps/link/pages/admin/label-studio.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Metamigo = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid item sx={{ height: "100vh", width: "100%" }}>
+        <Iframe
+          id="link"
+          url={"https://quepasa.link.smex.org"}
+          width="100%"
+          height="100%"
+          frameBorder={0}
+        />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Metamigo;

apps/link/pages/admin/metamigo.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Metamigo = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid item sx={{ height: "100vh", width: "100%" }}>
+        <Iframe
+          id="link"
+          url={"https://sigarillo.link.smex.org"}
+          width="100%"
+          height="100%"
+          frameBorder={0}
+        />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Metamigo;

apps/link/pages/admin/zammad.tsx

@@ -0,0 +1,33 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper
+          url="http://localhost:3000/zammad/#manage"
+          hideSidebar={false}
+        />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;

apps/link/pages/api/auth/[...nextauth].ts

@@ -0,0 +1,17 @@
+import NextAuth from "next-auth";
+import Google from "next-auth/providers/google";
+import Apple from "next-auth/providers/apple";
+
+export default NextAuth({
+  providers: [
+    Google({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+    }),
+    Apple({
+      clientId: process.env.APPLE_CLIENT_ID,
+      clientSecret: process.env.APPLE_CLIENT_SECRET
+    }),
+  ],
+  secret: process.env.NEXTAUTH_SECRET,
+});

apps/link/pages/index.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Home = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="https://8003-digiresilienc-linkshell-c2tqwgcccbs.ws-eu86.gitpod.io/zammad/#dashboard" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Home;

apps/link/pages/leafcutter/about.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org/about"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;

apps/link/pages/leafcutter/create.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org/create"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;

apps/link/pages/leafcutter/faq.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org/faq"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;

apps/link/pages/leafcutter/index.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;

apps/link/pages/leafcutter/trends.tsx

@@ -0,0 +1,36 @@
+import { useState } from "react";
+import Head from "next/head";
+import { Grid, Button } from "@mui/material";
+import { Layout } from "components/Layout";
+import Iframe from "react-iframe";
+
+const Leafcutter = () => {
+  const [leafcutterURL, setLeafcutterURL] = useState(
+    "https://lc.digiresilience.org/trends"
+  );
+  return (
+    <Layout>
+      <Head>
+        <title>Link Shell</title>
+      </Head>
+      <Grid
+        container
+        spacing={0}
+        sx={{ height: "100%", width: "100%" }}
+        direction="column"
+      >
+        <Grid item sx={{ height: "100vh", width: "100%" }}>
+          <Iframe
+            id="link"
+            url={leafcutterURL}
+            width="100%"
+            height="100%"
+            frameBorder={0}
+          />
+        </Grid>
+      </Grid>
+    </Layout>
+  );
+};
+
+export default Leafcutter;

apps/link/pages/link.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/zoom/518/1490" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;

apps/link/pages/login.tsx

@@ -0,0 +1,85 @@
+import Head from "next/head";
+import { Box, Grid, Container, IconButton } from "@mui/material";
+import { Apple as AppleIcon, Google as GoogleIcon } from "@mui/icons-material";
+import { signIn, getSession } from "next-auth/react";
+
+const Login = ({ session }) => {
+  const buttonStyles = {
+    borderRadius: 500,
+    width: "100%",
+    fontSize: "16px",
+    fontWeight: "bold",
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Login</title>
+      </Head>
+      <Grid container direction="row-reverse" sx={{ p: 3 }}>
+        <Grid item />
+      </Grid>
+      <Container maxWidth="md" sx={{ mt: 3, mb: 20 }}>
+        <Grid container spacing={2} direction="column" alignItems="center">
+          <Grid item>
+            <Box sx={{ maxWidth: 200 }} />
+          </Grid>
+          <Grid item sx={{ textAlign: "center" }} />
+
+          <Grid item>
+            {!session ? (
+              <Grid
+                container
+                spacing={3}
+                direction="column"
+                alignItems="center"
+                sx={{ width: 450, mt: 1 }}
+              >
+                <Grid item sx={{ width: "100%" }}>
+                  <IconButton
+                    sx={buttonStyles}
+                    onClick={() =>
+                      signIn("google", {
+                        callbackUrl: `${window.location.origin}/setup`,
+                      })
+                    }
+                  >
+                    <GoogleIcon sx={{ mr: 1 }} />
+                  </IconButton>
+                </Grid>
+                <Grid item sx={{ width: "100%" }}>
+                  <IconButton
+                    sx={buttonStyles}
+                    onClick={() =>
+                      signIn("apple", {
+                        callbackUrl: `${window.location.origin}/setup`,
+                      })
+                    }
+                  >
+                    <AppleIcon sx={{ mr: 1 }} />
+                  </IconButton>
+                </Grid>
+                <Grid item sx={{ mt: 2 }} />
+              </Grid>
+            ) : null}
+            {session ? (
+              <Box component="h4">
+                {` ${session.user.name ?? session.user.email}.`}
+              </Box>
+            ) : null}
+          </Grid>
+        </Grid>
+      </Container>
+    </>
+  );
+};
+
+export default Login;
+
+export async function getServerSideProps(context) {
+  const session = (await getSession(context)) ?? null;
+
+  return {
+    props: { session },
+  };
+}

apps/link/pages/profile.tsx

@@ -0,0 +1,33 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Profile = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper
+          url="http://localhost:3000/zammad/#profile"
+          hideSidebar={false}
+        />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Profile;

apps/link/pages/tickets/[...id].tsx

@@ -0,0 +1,54 @@
+import Head from "next/head";
+import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
+import { Grid, Box } from "@mui/material";
+import { Layout } from "components/Layout";
+import { TicketDetail } from "components/TicketDetail";
+import { TicketEdit } from "components/TicketEdit";
+
+const Link: NextPage = ({ ticket, articles }: any) => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid container spacing={0} sx={{ height: "100vh" }} direction="row">
+      <Grid item sx={{ height: "100vh" }} xs={10}>
+        <TicketDetail ticket={ticket} articles={articles} />
+      </Grid>
+      <Grid item xs={2} sx={{ height: "100vh" }}>
+        <TicketEdit ticket={ticket} />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export const getServerSideProps: GetServerSideProps = async (
+  context: GetServerSidePropsContext
+) => {
+  const {
+    params: { id },
+  } = context;
+  const baseURL = `${process.env.ZAMMAD_URL}/api/v1`;
+  const token = process.env.ZAMMAD_API_TOKEN;
+  const headers = { Authorization: `Token ${token}` };
+  const rawTicket = await fetch(`${baseURL}/tickets/${id}`, {
+    headers,
+  });
+  const ticket = await rawTicket.json();
+  const rawArticles = await fetch(
+    `${baseURL}/ticket_articles/by_ticket/${id}`,
+    {
+      headers,
+    }
+  );
+  const articles = await rawArticles.json();
+
+  console.log({ ticket, articles });
+
+  return {
+    props: {
+      ticket,
+      articles,
+    },
+  };
+};
+export default Link;

apps/link/pages/tickets/assigned.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:8003/zammad/#ticket/view/my_tickets" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;

apps/link/pages/tickets/pending.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/view/my_pending_reached" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;

apps/link/pages/tickets/unassigned.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/view/all_unassigned" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;

apps/link/pages/tickets/urgent.tsx

@@ -0,0 +1,30 @@
+import Head from "next/head";
+import { Grid } from "@mui/material";
+import { Layout } from "components/Layout";
+import { ZammadWrapper } from "components/ZammadWrapper";
+
+const Link = () => (
+  <Layout>
+    <Head>
+      <title>Link Shell</title>
+    </Head>
+    <Grid
+      container
+      spacing={0}
+      sx={{ height: "100%", width: "100%" }}
+      direction="column"
+    >
+      <Grid
+        item
+        sx={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <ZammadWrapper url="http://localhost:3000/zammad/#ticket/view/all_escalated" />
+      </Grid>
+    </Grid>
+  </Layout>
+);
+
+export default Link;

apps/link/scripts/bootstrap-metamigo.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+set -e
+
+echo "Creating the Metamigo database and the roles"
+# We're using 'template1' because we know it should exist. We should not actually change this database.
+psql -Xv ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname template1 <<EOF
+CREATE ROLE ${DATABASE_OWNER} WITH LOGIN PASSWORD '${DATABASE_PASSWORD}';
+GRANT ${DATABASE_OWNER} TO ${DATABASE_ROOT_OWNER};
+CREATE ROLE ${DATABASE_AUTHENTICATOR} WITH LOGIN PASSWORD '${DATABASE_AUTHENTICATOR_PASSWORD}' NOINHERIT;
+CREATE ROLE ${DATABASE_VISITOR};
+GRANT ${DATABASE_VISITOR} TO ${DATABASE_AUTHENTICATOR};
+-- Database permissions
+REVOKE ALL ON DATABASE ${DATABASE_NAME} FROM PUBLIC;
+GRANT ALL ON DATABASE ${DATABASE_NAME} TO ${DATABASE_OWNER};
+GRANT CONNECT ON DATABASE ${DATABASE_NAME} TO ${DATABASE_AUTHENTICATOR};
+EOF
+
+echo "Installing extensions into the database"
+psql -Xv ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$DATABASE_NAME" <<EOF
+CREATE EXTENSION IF NOT EXISTS plpgsql WITH SCHEMA pg_catalog;
+CREATE EXTENSION IF NOT EXISTS "uuid-ossp" WITH SCHEMA public;
+CREATE EXTENSION IF NOT EXISTS citext WITH SCHEMA public;
+CREATE EXTENSION IF NOT EXISTS pgcrypto WITH SCHEMA public;
+CREATE EXTENSION IF NOT EXISTS tablefunc WITH SCHEMA public;
+EOF
+
+echo "Creating roles in the database"
+psql -Xv ON_ERROR_STOP=1  --username "$POSTGRES_USER" --dbname "$DATABASE_NAME" <<EOF
+CREATE ROLE app_anonymous;
+CREATE ROLE app_user WITH IN ROLE app_anonymous;
+CREATE ROLE app_admin WITH IN ROLE app_user;
+GRANT app_anonymous TO ${DATABASE_AUTHENTICATOR};
+GRANT app_admin TO ${DATABASE_AUTHENTICATOR};
+EOF
+

apps/link/scripts/create-admin-user.sh

@@ -0,0 +1,6 @@
+echo "Creating Metamigo admin user"
+psql -Xv ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$DATABASE_NAME" <<EOF
+INSERT INTO app_public.users(email, name, user_role, is_active, created_by)
+VALUES('$GITLAB_EMAIL_ADDRESS', 'Admin', 'admin'::app_public.role_type, true, '')
+on conflict (email) do update set user_role = 'admin'::app_public.role_type, is_active = true;
+EOF

apps/link/styles/global.css

@@ -0,0 +1,78 @@
+body {
+  overscroll-behavior-x: none;
+  overscroll-behavior-y: none;
+  text-size-adjust: none;
+}
+
+.internal-note .cs-message__content {
+  background-color: #FFB62088 !important;
+  border: 2px solid #FFB620 !important;
+  border-radius: 0 !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+}
+
+.incoming-message .cs-message__content {
+  color: white !important;
+  background-color: #43CC47 !important;
+  border-radius: 14px !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+}
+
+.outgoing-message .cs-message__content {
+  color: white !important;
+  background-color: #1982FC !important;
+  border-radius: 14px !important;
+  margin: 12px;
+  font-family: Roboto !important;
+  font-size: 16px !important;
+  padding: 20px !important;
+}
+
+.incoming-message .cs-message__content a {
+  color: white !important;
+}
+
+.outgoing-message .cs-message__content a {
+  color: white !important;
+}
+
+.cs-message-input__content-editor-wrapper {
+  background-color: white !important;
+  border: 1px solid #ccc !important;
+  margin: 10px !important;
+}
+
+.cs-message-input__content-editor-container {
+  background-color: white !important;
+}
+
+.cs-message-input__content-editor {
+  background-color: white !important;
+  font-family: Roboto !important;
+}
+
+.cs-conversation-header {
+  background-color: #ddd !important;
+  border: 0 !important;
+  padding: 20px !important;
+  border-bottom: 1px solid #ccc !important;
+}
+
+.cs-message-list {
+  background-color: #eee !important;
+}
+
+.cs-message-input {
+  background-color: #dfdfdf !important;
+}
+
+.cs-main-container {
+  border: 0 !important;
+  border-right: 1px solid #ccc !important;
+}

apps/link/styles/theme.ts

@@ -0,0 +1,86 @@
+export const colors: any = {
+  lightGray: "#ededf0",
+  mediumGray: "#e3e5e5",
+  darkGray: "#33302f",
+  mediumBlue: "#4285f4",
+  green: "#349d7b",
+  lavender: "#a5a6f6",
+  darkLavender: "#5d5fef",
+  pink: "#fcddec",
+  cdrLinkOrange: "#ff7115",
+  coreYellow: "#fac942",
+  helpYellow: "#fff4d5",
+  dwcDarkBlue: "#191847",
+  hazyMint: "#ecf7f8",
+  leafcutterElectricBlue: "#4d6aff",
+  leafcutterLightBlue: "#fafbfd",
+  waterbearElectricPurple: "#332c83",
+  waterbearLightSmokePurple: "#eff3f8",
+  bumpedPurple: "#212058",
+  mutedPurple: "#373669",
+  warningPink: "#ef5da8",
+  lightPink: "#fff0f7",
+  lightGreen: "#f0fff3",
+  lightOrange: "#fff5f0",
+  beige: "#f6f2f1",
+  almostBlack: "#33302f",
+  white: "#ffffff",
+};
+
+export const typography: any = {
+  h1: {
+    fontFamily: "Playfair, serif",
+    fontSize: 45,
+    fontWeight: 700,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h2: {
+    fontFamily: "Poppins, sans-serif",
+    fontSize: 35,
+    fontWeight: 700,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h3: {
+    fontFamily: "Poppins, sans-serif",
+    fontWeight: 400,
+    fontSize: 27,
+    lineHeight: 1.1,
+    margin: 0,
+  },
+  h4: {
+    fontFamily: "Poppins, sans-serif",
+    fontWeight: 700,
+    fontSize: 18,
+  },
+  h5: {
+    fontFamily: "Roboto, sans-serif",
+    fontWeight: 700,
+    fontSize: 16,
+    lineHeight: "24px",
+    textTransform: "uppercase",
+    textAlign: "center",
+    margin: 1,
+  },
+  h6: {
+    fontFamily: "Roboto, sans-serif",
+    fontWeight: 400,
+    fontSize: 14,
+    textAlign: "center",
+  },
+  p: {
+    fontFamily: "Roboto, sans-serif",
+    fontSize: 17,
+    lineHeight: "26.35px",
+    fontWeight: 400,
+    margin: 0,
+  },
+  small: {
+    fontFamily: "Roboto, sans-serif",
+    fontSize: 13,
+    lineHeight: "18px",
+    fontWeight: 400,
+    margin: 0,
+  },
+};

apps/link/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": "."
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

apps/metamigo-api/.eslintrc.js

@@ -0,0 +1 @@
+require("../.eslintrc.js");

apps/metamigo-api/app/index.ts

@@ -0,0 +1,26 @@
+import type * as Hapi from "@hapi/hapi";
+import * as Joi from "joi";
+import type { IAppConfig } from "../config";
+import * as Services from "./services";
+import * as Routes from "./routes";
+import * as Plugins from "./plugins";
+
+const AppPlugin = {
+  name: "App",
+  register: async (
+    server: Hapi.Server,
+    options: { config: IAppConfig }
+  ): Promise<void> => {
+    // declare our **run-time** plugin dependencies
+    // these are runtime only deps, not registration time
+    // ref: https://hapipal.com/best-practices/handling-plugin-dependencies
+    server.dependency(["config", "hapi-pino"]);
+
+    server.validator(Joi);
+    await Plugins.register(server, options.config);
+    await Services.register(server);
+    await Routes.register(server);
+  },
+};
+
+export default AppPlugin;

apps/metamigo-api/app/lib/whatsapp-key-store.ts

@@ -0,0 +1,198 @@
+import { Boom } from "@hapi/boom";
+import { Server } from "@hapi/hapi";
+import { randomBytes } from "crypto";
+import type { Logger } from "pino";
+import {
+  proto,
+  BufferJSON,
+  generateRegistrationId,
+  Curve,
+  signedKeyPair,
+  AuthenticationCreds,
+  AuthenticationState,
+  AccountSettings,
+  SignalDataSet,
+  SignalDataTypeMap,
+  SignalKeyStore,
+  SignalKeyStoreWithTransaction,
+} from "@adiwajshing/baileys";
+import { SavedWhatsappBot as Bot } from "db";
+
+const KEY_MAP: { [T in keyof SignalDataTypeMap]: string } = {
+  "pre-key": "preKeys",
+  session: "sessions",
+  "sender-key": "senderKeys",
+  "app-state-sync-key": "appStateSyncKeys",
+  "app-state-sync-version": "appStateVersions",
+  "sender-key-memory": "senderKeyMemory",
+};
+
+export const addTransactionCapability = (
+  state: SignalKeyStore,
+  logger: Logger
+): SignalKeyStoreWithTransaction => {
+  let inTransaction = false;
+  let transactionCache: SignalDataSet = {};
+  let mutations: SignalDataSet = {};
+
+  const prefetch = async (type: keyof SignalDataTypeMap, ids: string[]) => {
+    if (!inTransaction) {
+      throw new Boom("Cannot prefetch without transaction");
+    }
+
+    const dict = transactionCache[type];
+    const idsRequiringFetch = dict
+      ? ids.filter((item) => !(item in dict))
+      : ids;
+    // only fetch if there are any items to fetch
+    if (idsRequiringFetch.length) {
+      const result = await state.get(type, idsRequiringFetch);
+
+      transactionCache[type] = transactionCache[type] || {};
+      // @ts-expect-error
+      Object.assign(transactionCache[type], result);
+    }
+  };
+
+  return {
+    get: async (type, ids) => {
+      if (inTransaction) {
+        await prefetch(type, ids);
+        return ids.reduce((dict, id) => {
+          const value = transactionCache[type]?.[id];
+          if (value) {
+            // @ts-expect-error
+            dict[id] = value;
+          }
+
+          return dict;
+        }, {});
+      } else {
+        return state.get(type, ids);
+      }
+    },
+    set: (data) => {
+      if (inTransaction) {
+        logger.trace({ types: Object.keys(data) }, "caching in transaction");
+        for (const key in data) {
+          // @ts-expect-error
+          transactionCache[key] = transactionCache[key] || {};
+          // @ts-expect-error
+          Object.assign(transactionCache[key], data[key]);
+          // @ts-expect-error
+          mutations[key] = mutations[key] || {};
+          // @ts-expect-error
+          Object.assign(mutations[key], data[key]);
+        }
+      } else {
+        return state.set(data);
+      }
+    },
+    isInTransaction: () => inTransaction,
+    // @ts-expect-error
+    prefetch: (type, ids) => {
+      logger.trace({ type, ids }, "prefetching");
+      return prefetch(type, ids);
+    },
+    transaction: async (work) => {
+      if (inTransaction) {
+        await work();
+      } else {
+        logger.debug("entering transaction");
+        inTransaction = true;
+        try {
+          await work();
+          if (Object.keys(mutations).length) {
+            logger.debug("committing transaction");
+            await state.set(mutations);
+          } else {
+            logger.debug("no mutations in transaction");
+          }
+        } finally {
+          inTransaction = false;
+          transactionCache = {};
+          mutations = {};
+        }
+      }
+    },
+  };
+};
+
+export const initAuthCreds = (): AuthenticationCreds => {
+  const identityKey = Curve.generateKeyPair();
+  return {
+    noiseKey: Curve.generateKeyPair(),
+    signedIdentityKey: identityKey,
+    signedPreKey: signedKeyPair(identityKey, 1),
+    registrationId: generateRegistrationId(),
+    advSecretKey: randomBytes(32).toString("base64"),
+    nextPreKeyId: 1,
+    firstUnuploadedPreKeyId: 1,
+
+    processedHistoryMessages: [],
+    accountSettings: {
+      unarchiveChats: false,
+    },
+  } as any;
+};
+
+export const useDatabaseAuthState = (
+  bot: Bot,
+  server: Server
+): { state: AuthenticationState; saveState: () => void } => {
+  let { logger }: any = server;
+  let creds: AuthenticationCreds;
+  let keys: any = {};
+
+  const saveState = async () => {
+    logger && logger.trace("saving auth state");
+    const authInfo = JSON.stringify({ creds, keys }, BufferJSON.replacer, 2);
+    await server.db().whatsappBots.updateAuthInfo(bot, authInfo);
+  };
+
+  if (bot.authInfo) {
+    console.log("Auth info exists");
+    const result = JSON.parse(bot.authInfo, BufferJSON.reviver);
+    creds = result.creds;
+    keys = result.keys;
+  } else {
+    console.log("Auth info does not exist");
+    creds = initAuthCreds();
+    keys = {};
+  }
+
+  return {
+    state: {
+      creds,
+      keys: {
+        get: (type, ids) => {
+          const key = KEY_MAP[type];
+          return ids.reduce((dict, id) => {
+            let value = keys[key]?.[id];
+            if (value) {
+              if (type === "app-state-sync-key") {
+                // @ts-expect-error
+                value = proto.AppStateSyncKeyData.fromObject(value);
+              }
+              // @ts-expect-error
+              dict[id] = value;
+            }
+
+            return dict;
+          }, {});
+        },
+        set: (data) => {
+          for (const _key in data) {
+            const key = KEY_MAP[_key as keyof SignalDataTypeMap];
+            keys[key] = keys[key] || {};
+            // @ts-expect-error
+            Object.assign(keys[key], data[_key]);
+          }
+
+          saveState();
+        },
+      },
+    },
+    saveState,
+  };
+};

apps/metamigo-api/app/plugins/cloudflare-jwt.ts

@@ -0,0 +1,114 @@
+import * as Boom from "@hapi/boom";
+import * as Hoek from "@hapi/hoek";
+import * as Hapi from "@hapi/hapi";
+import { promisify } from "util";
+import jwt from "jsonwebtoken";
+import jwksClient, { hapiJwt2KeyAsync } from "jwks-rsa";
+import type { IAppConfig } from "../../config";
+
+const CF_JWT_HEADER_NAME = "cf-access-jwt-assertion";
+const CF_JWT_ALGOS = ["RS256"];
+
+const verifyToken = (settings: any) => {
+  const { audience, issuer } = settings;
+  const client = jwksClient({
+    jwksUri: `${issuer}/cdn-cgi/access/certs`,
+  });
+
+  return async (token: any) => {
+    const getKey = (header: any, callback: any) => {
+      client.getSigningKey(header.kid, (err, key) => {
+        if (err)
+          throw Boom.serverUnavailable(
+            "failed to fetch cloudflare access jwks"
+          );
+        callback(undefined, key?.getPublicKey());
+      });
+    };
+
+    const opts = {
+      algorithms: CF_JWT_ALGOS,
+      audience,
+      issuer,
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (promisify(jwt.verify) as any)(token, getKey, opts);
+  };
+};
+
+const handleCfJwt = (verify: any) => async (
+  request: Hapi.Request,
+  h: Hapi.ResponseToolkit
+) => {
+  const token = request.headers[CF_JWT_HEADER_NAME];
+  if (token) {
+    try {
+      await verify(token);
+    } catch (error) {
+      console.error(error);
+      return Boom.unauthorized("invalid cloudflare access token");
+    }
+  }
+
+  return h.continue;
+};
+
+const defaultOpts = {
+  issuer: undefined,
+  audience: undefined,
+  strategyName: "clouflareaccess",
+  validate: undefined,
+};
+
+const cfJwtRegister = async (server: Hapi.Server, options: any): Promise<void> => {
+  server.dependency(["hapi-auth-jwt2"]);
+  const settings = Hoek.applyToDefaults(defaultOpts, options);
+  const verify = verifyToken(settings);
+
+  const { validate, strategyName, audience, issuer } = settings;
+  server.ext("onPreAuth", handleCfJwt(verify));
+
+  server.auth.strategy(strategyName!, "jwt", {
+    key: hapiJwt2KeyAsync({
+      jwksUri: `${issuer}/cdn-cgi/access/certs`,
+    }),
+    cookieKey: false,
+    urlKey: false,
+    headerKey: CF_JWT_HEADER_NAME,
+    validate,
+    verifyOptions: {
+      audience,
+      issuer,
+      algorithms: ["RS256"],
+    },
+  });
+};
+
+export const registerCloudflareAccessJwt = async (
+  server: Hapi.Server,
+  config: IAppConfig
+): Promise<void> => {
+  const { audience, domain } = config.cfaccess;
+  // only enable this plugin if cloudflare access config is configured
+  if (audience && domain) {
+    server.log(["auth"], "cloudflare access authorization enabled");
+    await server.register({
+      plugin: {
+        name: "cloudflare-jwt",
+        version: "0.0.1",
+        register: cfJwtRegister,
+      },
+      options: {
+        issuer: `https://${domain}`,
+        audience,
+        validate: (decoded: any, _request: any) => {
+          const { email, name } = decoded;
+          return {
+            isValid: true,
+            credentials: { user: { email, name } },
+          };
+        },
+      },
+    });
+  }
+};

apps/metamigo-api/app/plugins/hapi-nextauth.ts

@@ -0,0 +1,26 @@
+import type * as Hapi from "@hapi/hapi";
+import NextAuthPlugin, { AdapterFactory } from "@digiresilience/hapi-nextauth";
+import { NextAuthAdapter } from "common";
+import type { SavedUser, UnsavedUser, SavedSession } from "common";
+import { IAppConfig } from "config";
+
+export const registerNextAuth = async (
+  server: Hapi.Server,
+  config: IAppConfig
+): Promise<void> => {
+  // I'm not sure why I need to be so explicit with the generic types here
+  // I thought ts could figure out the generics based on the concrete params, but apparently not
+  const nextAuthAdapterFactory: AdapterFactory<
+    SavedUser,
+    UnsavedUser,
+    SavedSession
+  > = (request: Hapi.Request) => new NextAuthAdapter(request.db());
+
+  await server.register({
+    plugin: NextAuthPlugin,
+    options: {
+      nextAuthAdapterFactory,
+      sharedSecret: config.nextAuth.secret,
+    },
+  });
+};

apps/metamigo-api/app/plugins/index.ts

@@ -0,0 +1,32 @@
+import type * as Hapi from "@hapi/hapi";
+import Schmervice from "@hapipal/schmervice";
+import PgPromisePlugin from "@digiresilience/hapi-pg-promise";
+
+import type { IAppConfig } from "../../config";
+import { dbInitOptions } from "db";
+import { registerNextAuth } from "./hapi-nextauth";
+import { registerSwagger } from "./swagger";
+import { registerNextAuthJwt } from "./nextauth-jwt";
+import { registerCloudflareAccessJwt } from "./cloudflare-jwt";
+
+export const register = async (
+  server: Hapi.Server,
+  config: IAppConfig
+): Promise<void> => {
+  await server.register(Schmervice);
+
+  await server.register({
+    plugin: PgPromisePlugin,
+    options: {
+      // the only required parameter is the connection string
+      connection: config.db.connection,
+      // ... and the pg-promise initialization options
+      pgpInit: dbInitOptions(config),
+    },
+  });
+
+  await registerNextAuth(server, config);
+  await registerSwagger(server);
+  await registerNextAuthJwt(server, config);
+  await registerCloudflareAccessJwt(server, config);
+};

apps/metamigo-api/app/plugins/nextauth-jwt.ts

@@ -0,0 +1,100 @@
+import * as Hoek from "@hapi/hoek";
+import * as Hapi from "@hapi/hapi";
+import type { IAppConfig } from "../../config";
+
+// hapi-auth-jwt2 expects the key to be a raw key
+const jwkToHapiAuthJwt2 = (jwkString) => {
+  try {
+    const jwk = JSON.parse(jwkString);
+    return Buffer.from(jwk.k, "base64");
+  } catch {
+    throw new Error(
+      "Failed to parse key for JWT verification. This is probably an application configuration error."
+    );
+  }
+};
+
+const jwtDefaults = {
+  jwkeysB64: undefined,
+  validate: undefined,
+  strategyName: "nextauth-jwt",
+};
+
+const jwtRegister = async (server: Hapi.Server, options): Promise<void> => {
+  server.dependency(["hapi-auth-jwt2"]);
+  const settings: any = Hoek.applyToDefaults(jwtDefaults, options);
+  const key = settings.jwkeysB64.map((k) => jwkToHapiAuthJwt2(k));
+
+  server.auth.strategy(settings.strategyName!, "jwt", {
+    key,
+    cookieKey: false,
+    urlKey: false,
+    validate: settings.validate,
+  });
+};
+
+export const registerNextAuthJwt = async (
+  server: Hapi.Server,
+  config: IAppConfig
+): Promise<void> => {
+  if (config.nextAuth.signingKey) {
+    await server.register({
+      plugin: {
+        name: "nextauth-jwt",
+        version: "0.0.2",
+        register: jwtRegister,
+      },
+      options: {
+        jwkeysB64: [config.nextAuth.signingKey],
+        validate: async (decoded, request: Hapi.Request) => {
+          const { email, name, role } = decoded;
+          const user = await request.db().users.findBy({ email });
+          if (!config.isProd) {
+            server.logger.info(
+              {
+                email,
+                name,
+                role,
+              },
+              "nextauth-jwt authorizing request"
+            );
+            // server.logger.info({ user }, "nextauth-jwt user result");
+          }
+
+          return {
+            isValid: Boolean(user && user.isActive),
+            // this credentials object is made available in every request
+            // at `request.auth.credentials`
+            credentials: { email, name, role },
+          };
+        },
+      },
+    });
+  } else if (config.isProd) {
+    throw new Error("Missing nextauth.signingKey configuration value.");
+  } else {
+    server.log(
+      ["warn"],
+      "Missing nextauth.signingKey configuration value. Authentication of nextauth endpoints disabled!"
+    );
+  }
+};
+
+// @hapi/jwt expects the key in its own format
+/* UNUSED
+const _jwkToHapiJwt = (jwkString) => {
+  try {
+    const jwk = JSON.parse(jwkString);
+    const rawKey = Buffer.from(jwk.k, "base64");
+    return {
+      key: rawKey,
+      algorithms: [jwk.alg],
+      kid: jwk.kid,
+    };
+  } catch {
+    throw new Error(
+      "Failed to parse key for JWT verification. This is probably an application configuration error."
+    );
+  }
+};
+*/

apps/metamigo-api/app/plugins/swagger.ts

@@ -0,0 +1,32 @@
+import * as Inert from "@hapi/inert";
+import * as Vision from "@hapi/vision";
+import type * as Hapi from "@hapi/hapi";
+import * as HapiSwagger from "hapi-swagger";
+
+export const registerSwagger = async (server: Hapi.Server): Promise<void> => {
+  const swaggerOptions: HapiSwagger.RegisterOptions = {
+    info: {
+      title: "Metamigo API Docs",
+      description: "part of CDR Link",
+      version: "0.1",
+    },
+    // group sets of endpoints by tag
+    tags: [
+      {
+        name: "users",
+        description: "API for Users",
+      },
+    ],
+    documentationRouteTags: ["swagger"],
+    documentationPath: "/api-docs",
+  };
+
+  await server.register([
+    { plugin: Inert },
+    { plugin: Vision },
+    {
+      plugin: HapiSwagger,
+      options: swaggerOptions,
+    },
+  ]);
+};

apps/metamigo-api/app/routes/helpers/index.ts

@@ -0,0 +1,21 @@
+import * as Metamigo from "common";
+import Toys from "@hapipal/toys";
+
+export const withDefaults = Toys.withRouteDefaults({
+  options: {
+    cors: true,
+    auth: "nextauth-jwt",
+    validate: {
+      failAction: Metamigo.validatingFailAction,
+    },
+  },
+});
+
+export const noAuth = Toys.withRouteDefaults({
+  options: {
+    cors: true,
+    validate: {
+      failAction: Metamigo.validatingFailAction,
+    },
+  },
+});

apps/metamigo-api/app/routes/index.ts

@@ -0,0 +1,33 @@
+import isFunction from "lodash/isFunction";
+import type * as Hapi from "@hapi/hapi";
+import * as RandomRoutes from "./random";
+import * as UserRoutes from "./users";
+import * as VoiceRoutes from "./voice";
+import * as WhatsappRoutes from "./whatsapp";
+import * as SignalRoutes from "./signal";
+
+const loadRouteIndex = async (server, index) => {
+  const routes = [];
+  for (const exported in index) {
+    if (Object.prototype.hasOwnProperty.call(index, exported)) {
+      const route = index[exported];
+      routes.push(route);
+    }
+  }
+
+  routes.forEach(async (route) => {
+    if (isFunction(route)) server.route(await route(server));
+    else server.route(route);
+  });
+};
+
+export const register = async (server: Hapi.Server): Promise<void> => {
+  // Load your routes here.
+  // routes are loaded from the list of exported vars
+  // a route file should export routes directly or an async function that returns the routes.
+  loadRouteIndex(server, RandomRoutes);
+  loadRouteIndex(server, UserRoutes);
+  loadRouteIndex(server, VoiceRoutes);
+  loadRouteIndex(server, WhatsappRoutes);
+  loadRouteIndex(server, SignalRoutes);
+};

apps/metamigo-api/app/routes/signal/index.ts

@@ -0,0 +1,249 @@
+import * as Hapi from "@hapi/hapi";
+import * as Joi from "joi";
+import * as Helpers from "../helpers";
+import Boom from "boom";
+
+const getSignalService = (request) => {
+  return request.services().signaldService;
+};
+
+export const GetAllSignalBotsRoute = Helpers.withDefaults({
+  method: "get",
+  path: "/api/signal/bots",
+  options: {
+    description: "Get all bots",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const signalService = getSignalService(request);
+      const bots = await signalService.findAll();
+
+      if (bots) {
+        // with the pino logger the first arg is an object of data to log
+        // the second arg is a message
+        // all other args are formated args for the msg
+        request.logger.info({ bots }, "Retrieved bot(s) at %s", new Date());
+
+        return { bots };
+      }
+
+      return _h.response().code(204);
+    },
+  },
+});
+
+export const GetBotsRoute = Helpers.noAuth({
+  method: "get",
+  path: "/api/signal/bots/{token}",
+  options: {
+    description: "Get one bot",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { token } = request.params;
+      const signalService = getSignalService(request);
+
+      const bot = await signalService.findByToken(token);
+
+      if (bot) {
+        // with the pino logger the first arg is an object of data to log
+        // the second arg is a message
+        // all other args are formated args for the msg
+        request.logger.info({ bot }, "Retrieved bot(s) at %s", new Date());
+
+        return bot;
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+interface MessageRequest {
+  phoneNumber: string;
+  message: string;
+}
+
+export const SendBotRoute = Helpers.noAuth({
+  method: "post",
+  path: "/api/signal/bots/{token}/send",
+  options: {
+    description: "Send a message",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { token } = request.params;
+      const { phoneNumber, message } = request.payload as MessageRequest;
+      const signalService = getSignalService(request);
+
+      const bot = await signalService.findByToken(token);
+
+      if (bot) {
+        request.logger.info({ bot }, "Sent a message at %s", new Date());
+
+        await signalService.send(bot, phoneNumber, message as string);
+        return _h
+          .response({
+            result: {
+              recipient: phoneNumber,
+              timestamp: new Date().toISOString(),
+              source: bot.phoneNumber,
+            },
+          })
+          .code(200); // temp
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+interface ResetSessionRequest {
+  phoneNumber: string;
+}
+
+export const ResetSessionBotRoute = Helpers.noAuth({
+  method: "post",
+  path: "/api/signal/bots/{token}/resetSession",
+  options: {
+    description: "Reset a session with another user",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { token } = request.params;
+      const { phoneNumber } = request.payload as ResetSessionRequest;
+      const signalService = getSignalService(request);
+
+      const bot = await signalService.findByToken(token);
+
+      if (bot) {
+        await signalService.resetSession(bot, phoneNumber);
+        return _h
+          .response({
+            result: {
+              recipient: phoneNumber,
+              timestamp: new Date().toISOString(),
+              source: bot.phoneNumber,
+            },
+          })
+          .code(200); // temp
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+export const ReceiveBotRoute = Helpers.withDefaults({
+  method: "get",
+  path: "/api/signal/bots/{token}/receive",
+  options: {
+    description: "Receive messages",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { token } = request.params;
+      const signalService = getSignalService(request);
+
+      const bot = await signalService.findByToken(token);
+
+      if (bot) {
+        request.logger.info({ bot }, "Received messages at %s", new Date());
+
+        return signalService.receive(bot);
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+export const RegisterBotRoute = Helpers.withDefaults({
+  method: "get",
+  path: "/api/signal/bots/{id}/register",
+  options: {
+    description: "Register a bot",
+    handler: async (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
+      const { id } = request.params;
+      const signalService = getSignalService(request);
+      const { code } = request.query;
+
+      const bot = await signalService.findById(id);
+      if (!bot) throw Boom.notFound("Bot not found");
+
+      try {
+        request.logger.info({ bot }, "Create bot at %s", new Date());
+        await signalService.register(bot, code);
+        return h.response(bot).code(200);
+      } catch (error) {
+        return h.response().code(error.code);
+      }
+    },
+  },
+});
+
+interface BotRequest {
+  phoneNumber: string;
+  description: string;
+}
+
+export const CreateBotRoute = Helpers.withDefaults({
+  method: "post",
+  path: "/api/signal/bots",
+  options: {
+    description: "Register a bot",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { phoneNumber, description } = request.payload as BotRequest;
+      const signalService = getSignalService(request);
+      console.log("request.auth.credentials:", request.auth.credentials);
+
+      const bot = await signalService.create(
+        phoneNumber,
+        description,
+        request.auth.credentials.email as string
+      );
+      if (bot) {
+        request.logger.info({ bot }, "Create bot at %s", new Date());
+        return bot;
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+export const RequestCodeRoute = Helpers.withDefaults({
+  method: "get",
+  path: "/api/signal/bots/{id}/requestCode",
+  options: {
+    description: "Register a bot",
+    validate: {
+      params: Joi.object({
+        id: Joi.string().uuid().required(),
+      }),
+      query: Joi.object({
+        mode: Joi.string().valid("sms", "voice").required(),
+        captcha: Joi.string(),
+      }),
+    },
+    handler: async (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
+      const { id } = request.params;
+      const { mode, captcha } = request.query;
+      const signalService = getSignalService(request);
+
+      const bot = await signalService.findById(id);
+
+      if (!bot) {
+        throw Boom.notFound("Bot not found");
+      }
+
+      try {
+        if (mode === "sms") {
+          await signalService.requestSMSVerification(bot, captcha);
+        } else if (mode === "voice") {
+          await signalService.requestVoiceVerification(bot, captcha);
+        }
+        return h.response().code(200);
+      } catch (error) {
+        console.log(error);
+        if (error.name === "CaptchaRequiredException") {
+          return h.response().code(402);
+        } else if (error.code) {
+          return h.response().code(error.code);
+        } else {
+          return h.response().code(500);
+        }
+      }
+    },
+  },
+});

apps/metamigo-api/app/routes/users/index.ts

@@ -0,0 +1,59 @@
+import * as Joi from "joi";
+import * as Hapi from "@hapi/hapi";
+import { UserRecord, crudRoutesFor, CrudControllerBase } from "common";
+import * as RouteHelpers from "../helpers";
+
+class UserRecordController extends CrudControllerBase(UserRecord) { }
+
+const validator = (): Record<string, Hapi.RouteOptionsValidate> => ({
+  create: {
+    payload: Joi.object({
+      name: Joi.string().required(),
+      email: Joi.string().email().required(),
+      emailVerified: Joi.string().isoDate().required(),
+      createdBy: Joi.string().required(),
+      avatar: Joi.string()
+        .uri({ scheme: ["http", "https"] })
+        .optional(),
+      userRole: Joi.string().optional(),
+      isActive: Joi.boolean().optional(),
+    }).label("UserCreate"),
+  },
+  updateById: {
+    params: {
+      userId: Joi.string().uuid().required(),
+    },
+    payload: Joi.object({
+      name: Joi.string().optional(),
+      email: Joi.string().email().optional(),
+      emailVerified: Joi.string().isoDate().optional(),
+      createdBy: Joi.boolean().optional(),
+      avatar: Joi.string()
+        .uri({ scheme: ["http", "https"] })
+        .optional(),
+      userRole: Joi.string().optional(),
+      isActive: Joi.boolean().optional(),
+      createdAt: Joi.string().isoDate().optional(),
+      updatedAt: Joi.string().isoDate().optional(),
+    }).label("UserUpdate"),
+  },
+  deleteById: {
+    params: {
+      userId: Joi.string().uuid().required(),
+    },
+  },
+  getById: {
+    params: {
+      userId: Joi.string().uuid().required(),
+    },
+  },
+});
+
+export const UserRoutes = async (
+  _server: Hapi.Server
+): Promise<Hapi.ServerRoute[]> => {
+  const controller = new UserRecordController("users", "userId");
+  return RouteHelpers.withDefaults(
+    crudRoutesFor("user", "/api/users", controller, "userId", validator())
+  );
+};

apps/metamigo-api/app/routes/voice/index.ts

@@ -0,0 +1,124 @@
+import * as Hapi from "@hapi/hapi";
+import * as Joi from "joi";
+import * as Boom from "@hapi/boom";
+import * as R from "remeda";
+import * as Helpers from "../helpers";
+import Twilio from "twilio";
+import { crudRoutesFor, CrudControllerBase } from "common";
+import { VoiceLineRecord, SavedVoiceLine } from "db";
+
+const TwilioHandlers = {
+  freeNumbers: async (provider, request: Hapi.Request) => {
+    const { accountSid, apiKeySid, apiKeySecret } = provider.credentials;
+    const client = Twilio(apiKeySid, apiKeySecret, {
+      accountSid,
+    });
+    const numbers = R.pipe(
+      await client.incomingPhoneNumbers.list({ limit: 100 }),
+      R.filter((n) => n.capabilities.voice),
+      R.map(R.pick(["sid", "phoneNumber"]))
+    );
+    const numberSids = R.map(numbers, R.prop("sid"));
+    const voiceLineRepo = request.db().voiceLines;
+    const voiceLines: SavedVoiceLine[] =
+      await voiceLineRepo.findAllByProviderLineSids(numberSids);
+    const voiceLineSids = new Set(R.map(voiceLines, R.prop("providerLineSid")));
+
+    return R.pipe(
+      numbers,
+      R.reject((n) => voiceLineSids.has(n.sid)),
+      R.map((n) => ({ id: n.sid, name: n.phoneNumber }))
+    );
+  },
+};
+
+export const VoiceProviderRoutes = Helpers.withDefaults([
+  {
+    method: "GET",
+    path: "/api/voice/providers/{providerId}/freeNumbers",
+    options: {
+      description:
+        "get a list of the incoming numbers for a provider account that aren't assigned to a voice line",
+      validate: {
+        params: {
+          providerId: Joi.string().uuid().required(),
+        },
+      },
+      handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+        const { providerId } = request.params;
+        const voiceProvidersRepo = request.db().voiceProviders;
+        const provider = await voiceProvidersRepo.findById(providerId);
+        if (!provider) return Boom.notFound();
+        switch (provider.kind) {
+          case "TWILIO":
+            return TwilioHandlers.freeNumbers(provider, request);
+          default:
+            return Boom.badImplementation();
+        }
+      },
+    },
+  },
+]);
+
+class VoiceLineRecordController extends CrudControllerBase(VoiceLineRecord) { }
+
+const validator = (): Record<string, Hapi.RouteOptionsValidate> => ({
+  create: {
+    payload: Joi.object({
+      providerType: Joi.string().required(),
+      providerId: Joi.string().required(),
+      number: Joi.string().required(),
+      language: Joi.string().required(),
+      voice: Joi.string().required(),
+      promptText: Joi.string().optional(),
+      promptRecording: Joi.binary()
+        .encoding("base64")
+        .max(50 * 1000 * 1000)
+        .optional(),
+    }).label("VoiceLineCreate"),
+  },
+  updateById: {
+    params: {
+      id: Joi.string().uuid().required(),
+    },
+    payload: Joi.object({
+      providerType: Joi.string().optional(),
+      providerId: Joi.string().optional(),
+      number: Joi.string().optional(),
+      language: Joi.string().optional(),
+      voice: Joi.string().optional(),
+      promptText: Joi.string().optional(),
+      promptRecording: Joi.binary()
+        .encoding("base64")
+        .max(50 * 1000 * 1000)
+        .optional(),
+    }).label("VoiceLineUpdate"),
+  },
+  deleteById: {
+    params: {
+      id: Joi.string().uuid().required(),
+    },
+  },
+  getById: {
+    params: {
+      id: Joi.string().uuid().required(),
+    },
+  },
+});
+
+export const VoiceLineRoutes = async (
+  _server: Hapi.Server
+): Promise<Hapi.ServerRoute[]> => {
+  const controller = new VoiceLineRecordController("voiceLines", "id");
+  return Helpers.withDefaults(
+    crudRoutesFor(
+      "voice-line",
+      "/api/voice/voice-line",
+      controller,
+      "id",
+      validator()
+    )
+  );
+};
+
+export * from "./twilio";

apps/metamigo-api/app/routes/voice/twilio/index.ts

@@ -0,0 +1,230 @@
+import * as Hapi from "@hapi/hapi";
+import * as Joi from "joi";
+import * as Boom from "@hapi/boom";
+import Twilio from "twilio";
+import { SavedVoiceProvider } from "db";
+import pMemoize from "p-memoize";
+import ms from "ms";
+import * as Helpers from "../../helpers";
+import workerUtils from "../../../../worker-utils";
+import { SayLanguage, SayVoice } from "twilio/lib/twiml/VoiceResponse";
+
+const queueRecording = async (meta) => {
+  return workerUtils.addJob("twilio-recording", meta, { jobKey: meta.callSid });
+};
+
+const twilioClientFor = (provider: SavedVoiceProvider): Twilio.Twilio => {
+  const { accountSid, apiKeySid, apiKeySecret } = provider.credentials;
+  if (!accountSid || !apiKeySid || !apiKeySecret)
+    throw new Error(
+      `twilio provider ${provider.name} does not have credentials`
+    );
+
+  return Twilio(apiKeySid, apiKeySecret, {
+    accountSid,
+  });
+};
+
+const _getOrCreateTTSTestApplication = async (
+  url,
+  name,
+  client: Twilio.Twilio
+) => {
+  const application = await client.applications.list({ friendlyName: name });
+
+  if (application[0] && application[0].voiceUrl === url) {
+    return application[0];
+  }
+
+  return client.applications.create({
+    voiceMethod: "POST",
+    voiceUrl: url,
+    friendlyName: name,
+  });
+};
+
+const getOrCreateTTSTestApplication = pMemoize(_getOrCreateTTSTestApplication, {
+  maxAge: ms("1h"),
+});
+
+export const TwilioRoutes = Helpers.noAuth([
+  {
+    method: "get",
+    path: "/api/voice/twilio/prompt/{voiceLineId}",
+    options: {
+      description: "download the mp3 file to play as a prompt for the user",
+      validate: {
+        params: {
+          voiceLineId: Joi.string().uuid().required(),
+        },
+      },
+      handler: async (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
+        const { voiceLineId } = request.params;
+        const voiceLine = await request
+          .db()
+          .voiceLines.findById({ id: voiceLineId });
+
+        if (!voiceLine) return Boom.notFound();
+        if (!voiceLine.audioPromptEnabled) return Boom.badRequest();
+
+        const mp3 = voiceLine.promptAudio["audio/mpeg"];
+        if (!mp3) {
+          return Boom.serverUnavailable();
+        }
+
+        return h
+          .response(Buffer.from(mp3, "base64"))
+          .header("Content-Type", "audio/mpeg")
+          .header("Content-Disposition", "attachment; filename=prompt.mp3");
+      },
+    },
+  },
+  {
+    method: "post",
+    path: "/api/voice/twilio/record/{voiceLineId}",
+    options: {
+      description: "webhook for twilio to handle an incoming call",
+      validate: {
+        params: {
+          voiceLineId: Joi.string().uuid().required(),
+        },
+      },
+      handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+        const { voiceLineId } = request.params;
+        const { To } = request.payload as { To: string };
+        const voiceLine = await request.db().voiceLines.findBy({ number: To });
+        if (!voiceLine) return Boom.notFound();
+        if (voiceLine.id !== voiceLineId) return Boom.badRequest();
+
+        const frontendUrl = request.server.config().frontend.url;
+        const useTextPrompt = !voiceLine.audioPromptEnabled;
+
+        const twiml = new Twilio.twiml.VoiceResponse();
+        if (useTextPrompt) {
+          let prompt = voiceLine.promptText;
+          if (!prompt || prompt.length === 0)
+            prompt =
+              "The grabadora text prompt is unconfigured. Please set a prompt in the administration screen.";
+          twiml.say(
+            {
+              language: voiceLine.language as SayLanguage,
+              voice: voiceLine.voice as SayVoice,
+            },
+            prompt
+          );
+        } else {
+          const promptUrl = `${frontendUrl}/api/v1/voice/twilio/prompt/${voiceLineId}`;
+          twiml.play({ loop: 1 }, promptUrl);
+        }
+
+        twiml.record({
+          playBeep: true,
+          finishOnKey: "1",
+          recordingStatusCallback: `${frontendUrl}/api/v1/voice/twilio/recording-ready/${voiceLineId}`,
+        });
+        return twiml.toString();
+      },
+    },
+  },
+  {
+    method: "post",
+    path: "/api/voice/twilio/recording-ready/{voiceLineId}",
+    options: {
+      description: "webhook for twilio to handle a recording",
+      validate: {
+        params: {
+          voiceLineId: Joi.string().uuid().required(),
+        },
+      },
+      handler: async (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
+        const { voiceLineId } = request.params;
+        const voiceLine = await request
+          .db()
+          .voiceLines.findById({ id: voiceLineId });
+        if (!voiceLine) return Boom.notFound();
+
+        const { AccountSid, RecordingSid, CallSid } = request.payload as {
+          AccountSid: string;
+          RecordingSid: string;
+          CallSid: string;
+        };
+
+        await queueRecording({
+          voiceLineId,
+          accountSid: AccountSid,
+          callSid: CallSid,
+          recordingSid: RecordingSid,
+        });
+        return h.response().code(203);
+      },
+    },
+  },
+  {
+    method: "post",
+    path: "/api/voice/twilio/text-to-speech/{providerId}",
+    options: {
+      description: "webook for twilio to test the twilio text-to-speech",
+      validate: {
+        params: {
+          providerId: Joi.string().uuid().required(),
+        },
+      },
+      handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+        const { language, voice, prompt } = request.payload as {
+          language: SayLanguage;
+          voice: SayVoice;
+          prompt: string;
+        };
+        const twiml = new Twilio.twiml.VoiceResponse();
+        twiml.say({ language, voice }, prompt);
+        return twiml.toString();
+      },
+    },
+  },
+  {
+    method: "get",
+    path: "/api/voice/twilio/text-to-speech-token/{providerId}",
+    options: {
+      description:
+        "generates a one time token to test the twilio text-to-speech",
+      validate: {
+        params: {
+          providerId: Joi.string().uuid().required(),
+        },
+      },
+      handler: async (request: Hapi.Request, h: Hapi.ResponseToolkit) => {
+        const { providerId } = request.params as { providerId: string };
+        const provider: SavedVoiceProvider = await request
+          .db()
+          .voiceProviders.findById({ id: providerId });
+        if (!provider) return Boom.notFound();
+
+        const frontendUrl = request.server.config().frontend.url;
+        const url = `${frontendUrl}/api/v1/voice/twilio/text-to-speech/${providerId}`;
+        const name = `Grabadora text-to-speech tester: ${providerId}`;
+        const app = await getOrCreateTTSTestApplication(
+          url,
+          name,
+          twilioClientFor(provider)
+        );
+
+        const { accountSid, apiKeySecret, apiKeySid } = provider.credentials;
+        const token = new Twilio.jwt.AccessToken(
+          accountSid,
+          apiKeySid,
+          apiKeySecret,
+          { identity: "tts-test" }
+        );
+
+        const grant = new Twilio.jwt.AccessToken.VoiceGrant({
+          outgoingApplicationSid: app.sid,
+          incomingAllow: true,
+        });
+        token.addGrant(grant);
+        return h.response({
+          token: token.toJwt(),
+        });
+      },
+    },
+  },
+]);

apps/metamigo-api/app/routes/whatsapp/index.ts

@@ -0,0 +1,195 @@
+import * as Hapi from "@hapi/hapi";
+import * as Helpers from "../helpers";
+import Boom from "boom";
+
+export const GetAllWhatsappBotsRoute = Helpers.withDefaults({
+  method: "get",
+  path: "/api/whatsapp/bots",
+  options: {
+    description: "Get all bots",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { whatsappService } = request.services();
+
+      const bots = await whatsappService.findAll();
+
+      if (bots) {
+        // with the pino logger the first arg is an object of data to log
+        // the second arg is a message
+        // all other args are formated args for the msg
+        request.logger.info({ bots }, "Retrieved bot(s) at %s", new Date());
+
+        return { bots };
+      }
+
+      return _h.response().code(204);
+    },
+  },
+});
+
+export const GetBotsRoute = Helpers.noAuth({
+  method: "get",
+  path: "/api/whatsapp/bots/{token}",
+  options: {
+    description: "Get one bot",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { token } = request.params;
+      const { whatsappService } = request.services();
+
+      const bot = await whatsappService.findByToken(token);
+
+      if (bot) {
+        // with the pino logger the first arg is an object of data to log
+        // the second arg is a message
+        // all other args are formated args for the msg
+        request.logger.info({ bot }, "Retrieved bot(s) at %s", new Date());
+
+        return bot;
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+interface MessageRequest {
+  phoneNumber: string;
+  message: string;
+}
+
+export const SendBotRoute = Helpers.noAuth({
+  method: "post",
+  path: "/api/whatsapp/bots/{token}/send",
+  options: {
+    description: "Send a message",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { token } = request.params;
+      const { phoneNumber, message } = request.payload as MessageRequest;
+      const { whatsappService } = request.services();
+
+      const bot = await whatsappService.findByToken(token);
+
+      if (bot) {
+        request.logger.info({ bot }, "Sent a message at %s", new Date());
+
+        await whatsappService.send(bot, phoneNumber, message as string);
+        return _h
+          .response({
+            result: {
+              recipient: phoneNumber,
+              timestamp: new Date().toISOString(),
+              source: bot.phoneNumber,
+            },
+          })
+          .code(200); // temp
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+export const ReceiveBotRoute = Helpers.withDefaults({
+  method: "get",
+  path: "/api/whatsapp/bots/{token}/receive",
+  options: {
+    description: "Receive messages",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { token } = request.params;
+      const { whatsappService } = request.services();
+
+      const bot = await whatsappService.findByToken(token);
+
+      if (bot) {
+        request.logger.info({ bot }, "Received messages at %s", new Date());
+
+        // temp
+        const date = new Date();
+        const twoDaysAgo = new Date(date.getTime());
+        twoDaysAgo.setDate(date.getDate() - 2);
+        return whatsappService.receive(bot, twoDaysAgo);
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+export const RegisterBotRoute = Helpers.withDefaults({
+  method: "get",
+  path: "/api/whatsapp/bots/{id}/register",
+  options: {
+    description: "Register a bot",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { id } = request.params;
+      const { whatsappService } = request.services();
+
+      const bot = await whatsappService.findById(id);
+
+      if (bot) {
+        await whatsappService.register(bot, (error: string) => {
+          if (error) {
+            return _h.response(error).code(500);
+          }
+
+          request.logger.info({ bot }, "Register bot at %s", new Date());
+          return _h.response().code(200);
+        });
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+export const RefreshBotRoute = Helpers.withDefaults({
+  method: "get",
+  path: "/api/whatsapp/bots/{id}/refresh",
+  options: {
+    description: "Refresh messages",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { id } = request.params;
+      const { whatsappService } = request.services();
+
+      const bot = await whatsappService.findById(id);
+
+      if (bot) {
+        request.logger.info({ bot }, "Refreshed messages at %s", new Date());
+
+        //       await whatsappService.refresh(bot);
+        return;
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});
+
+interface BotRequest {
+  phoneNumber: string;
+  description: string;
+}
+
+export const CreateBotRoute = Helpers.withDefaults({
+  method: "post",
+  path: "/api/whatsapp/bots",
+  options: {
+    description: "Register a bot",
+    handler: async (request: Hapi.Request, _h: Hapi.ResponseToolkit) => {
+      const { phoneNumber, description } = request.payload as BotRequest;
+      const { whatsappService } = request.services();
+      console.log("request.auth.credentials:", request.auth.credentials);
+
+      const bot = await whatsappService.create(
+        phoneNumber,
+        description,
+        request.auth.credentials.email as string
+      );
+      if (bot) {
+        request.logger.info({ bot }, "Register bot at %s", new Date());
+        return bot;
+      }
+
+      throw Boom.notFound("Bot not found");
+    },
+  },
+});

apps/metamigo-api/app/services/index.ts

@@ -0,0 +1,14 @@
+import type * as Hapi from "@hapi/hapi";
+import SettingsService from "./settings";
+import RandomService from "./random";
+import WhatsappService from "./whatsapp";
+import SignaldService from "./signald";
+
+export const register = async (server: Hapi.Server): Promise<void> => {
+  // register your services here
+  // don't forget to add them to the AppServices interface in ../types/index.ts
+  server.registerService(RandomService);
+  server.registerService(SettingsService);
+  server.registerService(WhatsappService);
+  server.registerService(SignaldService);
+};

apps/metamigo-api/app/services/settings.ts

@@ -0,0 +1,16 @@
+import * as Hapi from "@hapi/hapi";
+import * as Schmervice from "@hapipal/schmervice";
+import { settingInfo, SettingsService } from "db";
+
+export const VoicemailPrompt = settingInfo<string>("voicemail-prompt");
+export const VoicemailMinLength = settingInfo<number>("voicemail-min-length");
+export const VoicemailUseTextPrompt = settingInfo<boolean>(
+  "voicemail-use-text-prompt"
+);
+
+export { ISettingsService } from "db";
+// @ts-expect-error
+const service = (server: Hapi.Server): Schmervice.ServiceFunctionalInterface =>
+  SettingsService(server.db().settings);
+
+export default service;

apps/metamigo-api/app/services/signald.ts

@@ -0,0 +1,200 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { Server } from "@hapi/hapi";
+import { Service } from "@hapipal/schmervice";
+import {
+  SignaldAPI,
+  IncomingMessagev1,
+  ClientMessageWrapperv1
+} from "@digiresilience/node-signald";
+import { SavedSignalBot as Bot } from "db";
+import workerUtils from "../../worker-utils";
+
+export default class SignaldService extends Service {
+  signald: SignaldAPI;
+  subscriptions: Set<string>;
+
+  constructor(server: Server, options: never) {
+    super(server, options);
+
+    if (this.server.config().signald.enabled) {
+      this.signald = new SignaldAPI();
+      this.signald.setLogger((level, msg, extra?) => {
+        this.server.logger[level]({ extra }, msg);
+      });
+      this.subscriptions = new Set();
+    }
+  }
+
+  async initialize(): Promise<void> {
+    if (this.server.config().signald.enabled && this.signald) {
+      this.setupListeners();
+      this.connect();
+    }
+  }
+
+  async teardown(): Promise<void> {
+    if (this.server.config().signald.enabled && this.signald)
+      this.signald.disconnect();
+  }
+
+  private connect() {
+    const { enabled, socket } = this.server.config().signald;
+    if (!enabled) return;
+    this.signald.connectWithBackoff(socket);
+  }
+
+  private async onConnected() {
+    await this.subscribeAll();
+  }
+
+  private setupListeners() {
+    this.signald.on("transport_error", async (error) => {
+      this.server.logger.info({ error }, "signald transport error");
+    });
+    this.signald.on("transport_connected", async () => {
+      this.onConnected();
+    });
+    this.signald.on("transport_received_payload", async (payload: ClientMessageWrapperv1) => {
+      this.server.logger.debug({ payload }, "signald payload received");
+      if (payload.type === "IncomingMessage") {
+        this.receiveMessage(payload.data)
+      }
+    });
+    this.signald.on("transport_sent_payload", async (payload) => {
+      this.server.logger.debug({ payload }, "signald payload sent");
+    });
+  }
+
+  private async subscribeAll() {
+    const result = await this.signald.listAccounts();
+    const accounts = result.accounts.map((account) => account.address.number);
+    await Promise.all(
+      accounts.map(async (account) => {
+        await this.signald.subscribe(account);
+        this.subscriptions.add(account);
+      })
+    );
+  }
+
+  private async unsubscribeAll() {
+    await Promise.all(
+      [...this.subscriptions].map(async (account) => {
+        await this.signald.unsubscribe(account);
+        this.subscriptions.delete(account);
+      })
+    );
+  }
+
+  async create(
+    phoneNumber: string,
+    description: string,
+    email: string
+  ): Promise<Bot> {
+    const db = this.server.db();
+    const user = await db.users.findBy({ email });
+    const row = await db.signalBots.insert({
+      phoneNumber,
+      description,
+      userId: user.id,
+    });
+    return row;
+  }
+
+  async findAll(): Promise<Bot[]> {
+    const db = this.server.db();
+    return db.signalBots.findAll();
+  }
+
+  async findById(id: string): Promise<Bot> {
+    const db = this.server.db();
+    return db.signalBots.findById({ id });
+  }
+
+  async findByToken(token: string): Promise<Bot> {
+    const db = this.server.db();
+    return db.signalBots.findBy({ token });
+  }
+
+  async register(bot: Bot, code: string): Promise<any> {
+    const address = await this.signald.verify(bot.phoneNumber, code);
+    this.server.db().signalBots.updateAuthInfo(bot, address.address.uuid);
+  }
+
+  async send(bot: Bot, phoneNumber: string, message: string): Promise<any> {
+    this.server.logger.debug(
+      { us: bot.phoneNumber, then: phoneNumber, message },
+      "signald send"
+    );
+    return await this.signald.send(
+      bot.phoneNumber,
+      { number: phoneNumber },
+      undefined,
+      message
+    );
+  }
+
+  async resetSession(bot: Bot, phoneNumber: string): Promise<any> {
+    return await this.signald.resetSession(bot.phoneNumber, {
+      number: phoneNumber,
+    });
+  }
+
+  async requestVoiceVerification(bot: Bot, captcha?: string): Promise<void> {
+    this.server.logger.debug(
+      { number: bot.phoneNumber, captcha },
+      "requesting voice verification for"
+    );
+
+    await this.signald.register(bot.phoneNumber, true, captcha);
+  }
+
+  async requestSMSVerification(bot: Bot, captcha?: string): Promise<void> {
+    this.server.logger.debug(
+      { number: bot.phoneNumber, captcha },
+      "requesting sms verification for"
+    );
+    await this.signald.register(bot.phoneNumber, false, captcha);
+  }
+
+  private async receiveMessage(message: IncomingMessagev1) {
+    const { account } = message;
+    if (!account) {
+      this.server.logger.debug({ message }, "invalid message received");
+      this.server.logger.error("invalid message received");
+    }
+
+    const bot = await this.server.db().signalBots.findBy({ phoneNumber: account });
+    if (!bot) {
+      this.server.logger.info("message received for unknown bot", {
+        account,
+        message,
+      });
+      return;
+    }
+
+    await this.queueMessage(bot, message);
+  }
+
+  private async queueMessage(bot: Bot, message: IncomingMessagev1) {
+    const { timestamp, account, data_message: dataMessage } = message;
+    if (!dataMessage?.body && !dataMessage?.attachments) {
+      this.server.logger.info({ message }, "message received with no content");
+      return;
+    }
+
+    if (!timestamp || !account) {
+      this.server.logger.debug({ message }, "invalid message received");
+    }
+
+    const receivedMessage = {
+      message,
+      botId: bot.id,
+      botPhoneNumber: bot.phoneNumber,
+    };
+
+    workerUtils.addJob("signald-message", receivedMessage, {
+      jobKey: `signal-bot-${bot.id}-${timestamp}`,
+      queueName: `signal-bot-${bot.id}`,
+    });
+  }
+}

apps/metamigo-api/app/services/whatsapp.ts

@@ -0,0 +1,247 @@
+import { Server } from "@hapi/hapi";
+import { Service } from "@hapipal/schmervice";
+import { SavedWhatsappBot as Bot } from "db";
+import makeWASocket, { DisconnectReason, proto, downloadContentFromMessage, MediaType } from "@adiwajshing/baileys";
+import workerUtils from "../../worker-utils";
+import { useDatabaseAuthState } from "../lib/whatsapp-key-store";
+import { connect } from "pg-monitor";
+
+export type AuthCompleteCallback = (error?: string) => void;
+
+export default class WhatsappService extends Service {
+  connections: { [key: string]: any } = {};
+  loginConnections: { [key: string]: any } = {};
+
+  static browserDescription: [string, string, string] = [
+    "Metamigo",
+    "Chrome",
+    "2.0",
+  ];
+
+  constructor(server: Server, options: never) {
+    super(server, options);
+  }
+
+  async initialize(): Promise<void> {
+    this.updateConnections();
+  }
+
+  async teardown(): Promise<void> {
+    this.resetConnections();
+  }
+
+  private async sleep(ms: number): Promise<void> {
+    console.log(`pausing ${ms}`)
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  private async resetConnections() {
+    for (const connection of Object.values(this.connections)) {
+      try {
+        connection.end(null)
+      } catch (error) {
+        console.log(error);
+      }
+    }
+    this.connections = {};
+  }
+
+  private createConnection(bot: Bot, server: Server, options: any, authCompleteCallback?: any) {
+    const { state, saveState } = useDatabaseAuthState(bot, server)
+    const connection = makeWASocket({ ...options, auth: state });
+    let pause = 5000;
+    connection.ev.on('connection.update', async (update) => {
+      console.log(`Connection updated ${JSON.stringify(update, null, 2)}`)
+      const { connection: connectionState, lastDisconnect, qr, isNewLogin } = update
+      if (qr) {
+        console.log('got qr code')
+        await this.server.db().whatsappBots.updateQR(bot, qr);
+      } else if (isNewLogin) {
+        console.log("got new login")
+      } else if (connectionState === 'open') {
+        console.log('opened connection')
+      } else if (connectionState === "close") {
+        console.log('connection closed due to ', lastDisconnect.error)
+        const disconnectStatusCode = (lastDisconnect?.error as any)?.output?.statusCode
+        if (disconnectStatusCode === DisconnectReason.restartRequired) {
+          console.log('reconnecting after got new login')
+          const updatedBot = await this.findById(bot.id);
+          this.createConnection(updatedBot, server, options)
+          authCompleteCallback()
+        } else if (disconnectStatusCode !== DisconnectReason.loggedOut) {
+          console.log('reconnecting')
+          await this.sleep(pause)
+          pause = pause * 2
+          this.createConnection(bot, server, options)
+        }
+      }
+    })
+
+    connection.ev.on('chats.set', item => console.log(`recv ${item.chats.length} chats (is latest: ${item.isLatest})`))
+    connection.ev.on('messages.set', item => console.log(`recv ${item.messages.length} messages (is latest: ${item.isLatest})`))
+    connection.ev.on('contacts.set', item => console.log(`recv ${item.contacts.length} contacts`))
+    connection.ev.on('messages.upsert', async m => {
+      console.log("messages upsert")
+      const { messages } = m;
+      if (messages) {
+        await this.queueUnreadMessages(bot, messages);
+      }
+    })
+    connection.ev.on('messages.update', m => console.log(m))
+    connection.ev.on('message-receipt.update', m => console.log(m))
+    connection.ev.on('presence.update', m => console.log(m))
+    connection.ev.on('chats.update', m => console.log(m))
+    connection.ev.on('contacts.upsert', m => console.log(m))
+    connection.ev.on('creds.update', saveState)
+
+    this.connections[bot.id] = connection;
+  }
+
+  private async updateConnections() {
+    this.resetConnections();
+
+    const bots = await this.server.db().whatsappBots.findAll();
+    for await (const bot of bots) {
+      if (bot.isVerified) {
+        this.createConnection(
+          bot,
+          this.server,
+          {
+            browser: WhatsappService.browserDescription,
+            printQRInTerminal: false,
+            version: [2, 2204, 13],
+          })
+      }
+    }
+  }
+
+  private async queueMessage(bot: Bot, webMessageInfo: proto.WebMessageInfo) {
+    const { key, message, messageTimestamp } = webMessageInfo;
+    const { remoteJid } = key;
+
+    if (!key.fromMe && message && remoteJid !== "status@broadcast") {
+      const isMediaMessage =
+        message.audioMessage ||
+        message.documentMessage ||
+        message.imageMessage ||
+        message.videoMessage;
+
+      let messageContent = Object.values(message)[0]
+      let messageType: MediaType;
+      let attachment: string;
+      let filename: string;
+      let mimetype: string;
+      if (isMediaMessage) {
+        if (message.audioMessage) {
+          messageType = "audio";
+          filename =
+            key.id + "." + message.audioMessage.mimetype.split("/").pop();
+          mimetype = message.audioMessage.mimetype;
+        } else if (message.documentMessage) {
+          messageType = "document";
+          filename = message.documentMessage.fileName;
+          mimetype = message.documentMessage.mimetype;
+        } else if (message.imageMessage) {
+          messageType = "image";
+          filename =
+            key.id + "." + message.imageMessage.mimetype.split("/").pop();
+          mimetype = message.imageMessage.mimetype;
+        } else if (message.videoMessage) {
+          messageType = "video"
+          filename =
+            key.id + "." + message.videoMessage.mimetype.split("/").pop();
+          mimetype = message.videoMessage.mimetype;
+        }
+
+        const stream = await downloadContentFromMessage(messageContent, messageType)
+        let buffer = Buffer.from([])
+        for await (const chunk of stream) {
+          buffer = Buffer.concat([buffer, chunk])
+        }
+        attachment = buffer.toString("base64");
+      }
+
+      if (messageContent || attachment) {
+        const receivedMessage = {
+          waMessageId: key.id,
+          waMessage: JSON.stringify(webMessageInfo),
+          waTimestamp: new Date((messageTimestamp as number) * 1000),
+          attachment,
+          filename,
+          mimetype,
+          whatsappBotId: bot.id,
+          botPhoneNumber: bot.phoneNumber,
+        };
+
+        workerUtils.addJob("whatsapp-message", receivedMessage, {
+          jobKey: key.id,
+        });
+      }
+    }
+  }
+
+  private async queueUnreadMessages(bot: Bot, messages: any[]) {
+    for await (const message of messages) {
+      await this.queueMessage(bot, message);
+    }
+  }
+
+  async create(
+    phoneNumber: string,
+    description: string,
+    email: string
+  ): Promise<Bot> {
+    const db = this.server.db();
+    const user = await db.users.findBy({ email });
+    const row = await db.whatsappBots.insert({
+      phoneNumber,
+      description,
+      userId: user.id,
+    });
+    return row;
+  }
+
+  async findAll(): Promise<Bot[]> {
+    return this.server.db().whatsappBots.findAll();
+  }
+
+  async findById(id: string): Promise<Bot> {
+    return this.server.db().whatsappBots.findById({ id });
+  }
+
+  async findByToken(token: string): Promise<Bot> {
+    return this.server.db().whatsappBots.findBy({ token });
+  }
+
+  async register(bot: Bot, callback: AuthCompleteCallback): Promise<void> {
+    await this.createConnection(bot, this.server, { version: [2, 2204, 13] }, callback);
+  }
+
+  async send(bot: Bot, phoneNumber: string, message: string): Promise<void> {
+    const connection = this.connections[bot.id];
+    const recipient = `${phoneNumber.replace(/\D+/g, "")}@s.whatsapp.net`;
+    await connection.sendMessage(recipient, { text: message });
+  }
+
+  async receiveSince(bot: Bot, lastReceivedDate: Date): Promise<void> {
+    const connection = this.connections[bot.id];
+    const messages = await connection.messagesReceivedAfter(
+      lastReceivedDate,
+      false
+    );
+    for (const message of messages) {
+      this.queueMessage(bot, message);
+    }
+  }
+
+  async receive(bot: Bot, lastReceivedDate: Date): Promise<any> {
+    const connection = this.connections[bot.id];
+    // const messages = await connection.messagesReceivedAfter(
+    //   lastReceivedDate,
+    //   false
+    // );
+
+    const messages = await connection.loadAllUnreadMessages();
+    return messages;
+  }
+}

apps/metamigo-api/app/types/index.ts

@@ -0,0 +1,27 @@
+import type { IMain } from "pg-promise";
+import type { ISettingsService } from "../services/settings";
+import type WhatsappService from "../services/whatsapp";
+import type SignaldService from "../services/signald";
+import type { IAppConfig } from "../../config";
+import type { AppDatabase } from "db";
+
+// add your service interfaces here
+interface AppServices {
+  settingsService: ISettingsService;
+  whatsappService: WhatsappService;
+  signaldService: SignaldService;
+}
+
+// extend the hapi types with our services and config
+declare module "@hapi/hapi" {
+  export interface Request {
+    services(): AppServices;
+    db(): AppDatabase;
+    pgp: IMain;
+  }
+  export interface Server {
+    config(): IAppConfig;
+    db(): AppDatabase;
+    pgp: IMain;
+  }
+}

apps/metamigo-api/babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript"
+  ]
+}

apps/metamigo-api/config.ts

@@ -0,0 +1,10 @@
+import config, {
+  loadConfig,
+  loadConfigRaw,
+  IAppConfig,
+  IAppConvict,
+} from "config";
+
+export { IAppConvict, IAppConfig, loadConfig, loadConfigRaw };
+
+export default config;

apps/metamigo-api/logger.ts

@@ -0,0 +1,8 @@
+import { defState } from "@digiresilience/montar";
+import { configureLogger } from "common";
+import config from "config";
+
+export const logger = defState("apiLogger", {
+  start: async () => configureLogger(config),
+});
+export default logger;

apps/metamigo-api/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "api",
+  "version": "0.2.0",
+  "main": "build/main/cli/index.js",
+  "author": "Abel Luck <abel@guardianproject.info>",
+  "license": "AGPL-3.0-or-later",
+  "dependencies": {
+    "@adiwajshing/baileys": "5.0.0",
+    "@adiwajshing/keyed-db": "0.2.4",
+    "@digiresilience/hapi-nextauth": "0.2.1",
+    "@digiresilience/hapi-pg-promise": "^0.0.3",
+    "@digiresilience/montar": "^0.1.6",
+    "@digiresilience/node-signald": "0.0.3",
+    "@graphile-contrib/pg-simplify-inflector": "^6.1.0",
+    "@hapi/basic": "^7.0.0",
+    "@hapi/boom": "^10.0.0",
+    "@hapi/wreck": "^18.0.0",
+    "@hapipal/schmervice": "^2.1.0",
+    "@hapipal/toys": "^3.2.0",
+    "blipp": "^4.0.2",
+    "camelcase-keys": "^8.0.2",
+    "fluent-ffmpeg": "^2.1.2",
+    "graphile-migrate": "^1.4.1",
+    "graphile-worker": "^0.13.0",
+    "hapi-auth-jwt2": "^10.4.0",
+    "hapi-postgraphile": "^0.11.0",
+    "hapi-swagger": "^15.0.0",
+    "joi": "^17.7.0",
+    "jsonwebtoken": "^9.0.0",
+    "jwks-rsa": "^3.0.1",
+    "long": "^5.2.1",
+    "p-memoize": "^7.1.1",
+    "pg-monitor": "^2.0.0",
+    "pg-promise": "^11.0.2",
+    "postgraphile-plugin-connection-filter": "^2.3.0",
+    "remeda": "^1.6.0",
+    "twilio": "^3.84.1"
+  },
+  "devDependencies": {
+    "@babel/core": "7.20.12",
+    "@babel/preset-env": "7.20.2",
+    "@babel/preset-typescript": "7.18.6",
+    "@types/jest": "^29.2.5",
+    "eslint": "^8.32.0",
+    "pino-pretty": "^9.1.1",
+    "prettier": "^2.8.3",
+    "ts-node": "^10.9.1",
+    "typescript": "4.9.4",
+    "@types/hapi__wreck": "^17.0.1",
+    "@types/long": "^4.0.2",
+    "nodemon": "^2.0.20",
+    "@types/node": "*",
+    "camelcase-keys": "^8.0.2",
+    "pg-monitor": "^2.0.0",
+    "typedoc": "^0.23.24"
+  },
+  "nodemonConfig": {
+    "ignore": [
+      "docs/*"
+    ],
+    "ext": "ts,json,js"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "fix:lint": "eslint src --ext .ts --fix",
+    "fix:prettier": "prettier \"src/**/*.ts\" --write",
+    "cli": "NODE_ENV=development nodemon --unhandled-rejections=strict build/main/cli/index.js",
+    "serve": "NODE_ENV=development npm run cli server",
+    "serve:prod": "NODE_ENV=production npm run cli server",
+    "worker": "NODE_ENV=development npm run cli worker",
+    "worker:prod": "NODE_ENV=production npm run cli worker",
+    "lint:lint": "eslint src --ext .ts",
+    "lint:prettier": "prettier \"src/**/*.ts\" --list-different",
+    "lint": "npm run lint:lint && npm run lint:prettier",
+    "watch:build": "tsc -p tsconfig.json -w"
+  }
+}

apps/metamigo-api/server/index.ts

@@ -0,0 +1,28 @@
+import * as Metamigo from "common";
+import { defState } from "@digiresilience/montar";
+import Manifest from "./manifest";
+import config, { IAppConfig } from "../config";
+
+export const deployment = async (
+  config: IAppConfig,
+  start = false
+): Promise<Metamigo.Server> => {
+  // Build the manifest, which describes all the plugins needed for our application server
+  const manifest = await Manifest.build(config);
+
+  // Create the server and optionally start it
+  const server = Metamigo.deployment(manifest, config, start);
+
+  return server;
+};
+
+export const stopDeployment = async (server: Metamigo.Server): Promise<void> => {
+  return Metamigo.stopDeployment(server);
+};
+
+const server = defState("server", {
+  start: () => deployment(config, true),
+  stop: () => stopDeployment(server),
+});
+
+export default server;

apps/metamigo-api/server/manifest.ts

@@ -0,0 +1,79 @@
+import * as Glue from "@hapi/glue";
+import * as Metamigo from "common";
+import * as Blipp from "blipp";
+import HapiBasic from "@hapi/basic";
+import HapiJwt from "hapi-auth-jwt2";
+import HapiPostgraphile from "hapi-postgraphile";
+import { getPostGraphileOptions } from "db";
+import AppPlugin from "../app";
+import type { IAppConfig } from "../config";
+
+const build = async (config: IAppConfig): Promise<Glue.Manifest> => {
+  const { port, address } = config.server;
+  const metamigoPlugins = Metamigo.defaultPlugins(config);
+  return {
+    server: {
+      port,
+      address,
+      debug: false, // We use pino not the built-in hapi logger
+      routes: {
+        validate: {
+          failAction: Metamigo.validatingFailAction,
+        },
+      },
+    },
+    register: {
+      plugins: [
+        // jwt plugin, required for our jwt auth plugin
+        { plugin: HapiJwt },
+
+        // Blipp prints the nicely formatted list of endpoints at app boot
+        { plugin: Blipp },
+
+        // load the metamigo base plugins
+        ...metamigoPlugins,
+
+        // basic authentication, required by hapi-nextauth
+        { plugin: HapiBasic },
+
+        // load our main app
+        {
+          plugin: AppPlugin,
+          options: {
+            config,
+          },
+        },
+        // load Postgraphile
+        {
+          plugin: HapiPostgraphile,
+          options: {
+            route: {
+              path: "/graphql",
+              options: {
+                auth: {
+                  strategies: ["nextauth-jwt"],
+                  mode: "optional",
+                },
+              },
+            },
+            pgConfig: config.postgraphile.authConnection,
+            schemaName: "app_public",
+            schemaOptions: {
+              ...getPostGraphileOptions(),
+              jwtAudiences: [config.nextAuth.audience],
+              jwtSecret: "",
+              // unauthenticated users will hit the database with this role
+              pgDefaultRole: "app_anonymous",
+            },
+          },
+        },
+      ],
+    },
+  };
+};
+
+const Manifest = {
+  build,
+};
+
+export default Manifest;

apps/metamigo-api/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "build/main",
+    "types": ["long", "jest", "node"],
+    "lib": ["es2020", "DOM"]
+  },
+  "include": ["**/*.ts", "**/.*.ts"],
+  "exclude": ["node_modules"]
+}

apps/metamigo-api/worker-utils.ts

@@ -0,0 +1,21 @@
+import * as Worker from "graphile-worker";
+import { defState } from "@digiresilience/montar";
+import config from "./config";
+
+const startWorkerUtils = async (): Promise<Worker.WorkerUtils> => {
+  const workerUtils = await Worker.makeWorkerUtils({
+    connectionString: config.worker.connection,
+  });
+  return workerUtils;
+};
+
+const stopWorkerUtils = async (): Promise<void> => {
+  return workerUtils.release();
+};
+
+const workerUtils = defState("apiWorkerUtils", {
+  start: startWorkerUtils,
+  stop: stopWorkerUtils,
+});
+
+export default workerUtils;

apps/metamigo-frontend/.eslintignore

@@ -0,0 +1,7 @@
+node_modules
+**/dist
+/data/schema.graphql
+/data/schema.sql
+/graphql/index.*
+/client/.next
+.next

apps/metamigo-frontend/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

apps/metamigo-frontend/components/AdminLogin.tsx

@@ -0,0 +1,85 @@
+import { FC, useEffect } from "react";
+import { CircularProgress, Typography, Grid } from "@material-ui/core";
+import { signIn, signOut, getSession } from "next-auth/react";
+import { useLogin, useTranslate } from "react-admin";
+
+export const authProvider = {
+  login: (o: any) => {
+    if (o.ok) return Promise.resolve();
+    return Promise.reject();
+  },
+  logout: async () => {
+    const session = await getSession();
+    if (session) {
+      await signOut();
+    }
+  },
+  checkError: (e: any) => {
+    if (e.graphQLErrors && e.graphQLErrors.length > 0) {
+      const permDenied =
+        e.graphQLErrors.filter((e: any) =>
+          e.message.match(/.*permission denied.*/)
+        ).length > 0;
+      if (permDenied)
+        // eslint-disable-next-line  prefer-promise-reject-errors
+        return Promise.reject({ message: "auth.permissionDenied" });
+    }
+
+    if (e.networkError && e.networkError.statusCode === 401) {
+      return Promise.reject();
+    }
+  },
+  checkAuth: async () => {
+    const session = await getSession();
+    if (!session) {
+      return Promise.reject();
+    }
+  },
+  getIdentity: async () => {
+    const session = await getSession();
+    if (!session) return Promise.reject(new Error("Invalid session"));
+
+    return {
+      id: session.user?.email,
+      fullName: session.user?.name,
+      avatar: session.user?.image,
+    };
+  },
+  getPermissions: () => Promise.resolve(),
+};
+
+export const AdminLogin: FC = () => {
+  const reactAdminLogin = useLogin();
+  const translate = useTranslate();
+
+  useEffect(() => {
+    (async () => {
+      const session = await getSession();
+      if (!session) {
+        signIn();
+      } else {
+        reactAdminLogin({ ok: true });
+      }
+    })();
+  });
+
+  return (
+    <Grid
+      container
+      spacing={5}
+      direction="column"
+      alignItems="center"
+      justify="center"
+      style={{ minHeight: "100vh" }}
+    >
+      <Grid item xs={3}>
+        <Typography variant="h4" color="textSecondary">
+          {translate("auth.loggingIn")}
+        </Typography>
+      </Grid>
+      <Grid item xs={3}>
+        <CircularProgress size={80} />
+      </Grid>
+    </Grid>
+  );
+};

apps/metamigo-frontend/components/Auth.tsx

@@ -0,0 +1,20 @@
+import { FC, PropsWithChildren, useEffect } from "react";
+import { CircularProgress } from "@material-ui/core";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+
+export const Auth: FC<PropsWithChildren> = ({ children }) => {
+  const router = useRouter();
+  const { data: session, status: loading } = useSession();
+  useEffect(() => {
+    if (!session && !loading) {
+      router.push("/login");
+    }
+  }, [session, loading]);
+
+  if (loading) {
+    return <CircularProgress />;
+  }
+
+  return <>{children}</>;
+};

apps/metamigo-frontend/components/DigitInput/DigitInput.module.css

@@ -0,0 +1,27 @@
+.input {
+  width: 40px;
+  height: 60px;
+  margin: 5px;
+  font-size: 1.4rem;
+  padding: 0 9px 0 12px;
+  border: none;
+  outline: none;
+  background: white;
+  font-weight: 400;
+  color: rgba(59, 59, 59, 0.788);
+  -webkit-box-shadow: 2px 2px 2px 1px #d6d6d6, -1px -1px 1px #e6e6e6;
+  box-shadow: 2px 2px 2px 1px #d6d6d6, -1px -1px 1px #e6e6e6;
+  border-radius: 5px;
+}
+
+.group {
+  margin-top: 1.6rem;
+}
+
+.hyphen {
+  background: black;
+  height: 0.1em;
+  width: 1em;
+  margin: 0 0.5em;
+  display: inline-block;
+}

apps/metamigo-frontend/components/DigitInput/index.tsx

@@ -0,0 +1,60 @@
+import { forwardRef } from "react";
+import useDigitInput, { InputAttributes } from "react-digit-input";
+import styles from "./DigitInput.module.css";
+
+const DigitInputElement = forwardRef<
+  HTMLInputElement,
+  Omit<InputAttributes, "ref"> & {
+    autoFocus?: boolean;
+  }
+>(({ ...props }, ref) => {
+  return (
+    <>
+      <input
+        aria-label="verification code"
+        className={styles.input}
+        {...props}
+        ref={ref}
+        inputMode="decimal"
+      />
+    </>
+  );
+});
+
+const DigitSeparator = forwardRef<
+  HTMLInputElement,
+  Omit<InputAttributes, "ref"> & {
+    autoFocus?: boolean;
+  }
+>(({ ...props }, ref) => {
+  return (
+    <>
+      <span className={styles.hyphen} ref={ref} />
+    </>
+  );
+});
+
+export const SixDigitInput = ({ value, onChange }: any) => {
+  const digits = useDigitInput({
+    acceptedCharacters: /^[0-9]$/,
+    length: 6,
+    value,
+    onChange,
+  });
+  return (
+    <div>
+      <div className={styles.group}>
+        <DigitInputElement autoFocus {...digits[0]} />
+        <DigitInputElement {...digits[1]} />
+        <DigitInputElement {...digits[2]} />
+        <DigitSeparator />
+        <DigitInputElement {...digits[3]} />
+        <DigitInputElement {...digits[4]} />
+        <DigitInputElement {...digits[5]} />
+      </div>
+      <pre hidden>
+        <code>{value}</code>
+      </pre>
+    </div>
+  );
+};

apps/metamigo-frontend/components/MetamigoAdmin.tsx

@@ -0,0 +1,64 @@
+import { FC, useEffect, useState } from "react";
+import { Admin, Resource } from "react-admin";
+import { useApolloClient } from "@apollo/client";
+import polyglotI18nProvider from "ra-i18n-polyglot";
+import { ThemeProvider, createMuiTheme } from "@material-ui/core/styles";
+import { metamigoDataProvider } from "../lib/dataprovider";
+import { theme } from "./layout/themes";
+import { Layout } from "./layout";
+import englishMessages from "../i18n/en";
+import users from "./users";
+import accounts from "./accounts";
+import whatsappBots from "./whatsapp/bots";
+import whatsappMessages from "./whatsapp/messages";
+import whatsappAttachments from "./whatsapp/attachments";
+import voiceLines from "./voice/voicelines";
+import signalBots from "./signal/bots";
+import voiceProviders from "./voice/providers";
+import webhooks from "./webhooks";
+import { AdminLogin, authProvider } from "./AdminLogin";
+
+const i18nProvider = polyglotI18nProvider((_locale) => {
+  return englishMessages;
+}, "en");
+
+const MetamigoAdmin: FC = () => {
+  const [dataProvider, setDataProvider] = useState(null);
+  const client = useApolloClient();
+
+  useEffect(() => {
+    (async () => {
+      const dataProvider = await metamigoDataProvider(client);
+      // @ts-ignore
+      setDataProvider(() => dataProvider);
+    })();
+  }, [client]);
+  return (
+    dataProvider && (
+      <ThemeProvider theme={createMuiTheme(theme)}>
+        <Admin
+          disableTelemetry
+          dataProvider={dataProvider}
+          layout={Layout}
+          i18nProvider={i18nProvider}
+          loginPage={AdminLogin}
+          // @ts-ignore
+          authProvider={authProvider}
+        >
+          <Resource name="webhooks" {...webhooks} />
+          <Resource name="whatsappBots" {...whatsappBots} />
+          <Resource name="whatsappMessages" {...whatsappMessages} />
+          <Resource name="whatsappAttachments" {...whatsappAttachments} />
+          <Resource name="signalBots" {...signalBots} />
+          <Resource name="voiceProviders" {...voiceProviders} />
+          <Resource name="voiceLines" {...voiceLines} />
+          <Resource name="users" {...users} />
+          <Resource name="accounts" {...accounts} />
+          <Resource name="languages" />
+        </Admin>
+      </ThemeProvider>
+    )
+  );
+};
+
+export default MetamigoAdmin;

apps/metamigo-frontend/components/accounts/AccountEdit.tsx

@@ -0,0 +1,59 @@
+import { FC } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import {
+  SimpleForm,
+  TextInput,
+  Edit,
+  ReferenceInput,
+  SelectInput,
+  DateInput,
+  Toolbar,
+  DeleteButton,
+  EditProps,
+} from "react-admin";
+import { useSession } from "next-auth/react";
+
+const useStyles = makeStyles((_theme) => ({
+  defaultToolbar: {
+    flex: 1,
+    display: "flex",
+    justifyContent: "space-between",
+  },
+}));
+
+type AccountEditToolbarProps = {
+  record?: any;
+};
+
+const AccountEditToolbar: FC<AccountEditToolbarProps> = (props) => {
+  const { data: session } = useSession();
+  const classes = useStyles(props);
+  return (
+    <Toolbar className={classes.defaultToolbar} {...props}>
+      <DeleteButton disabled={session?.user?.email === props.record?.userId} />
+    </Toolbar>
+  );
+};
+
+const AccountTitle = ({ record }: { record?: any }) => {
+  let title = "";
+  if (record) title = record.name ? record.name : record.email;
+  return <span>Account {title}</span>;
+};
+
+export const AccountEdit = (props: EditProps) => (
+  <Edit title={<AccountTitle />} {...props}>
+    <SimpleForm toolbar={<AccountEditToolbar />}>
+      <TextInput disabled source="id" />
+      <ReferenceInput source="userId" reference="users">
+        <SelectInput disabled optionText="email" />
+      </ReferenceInput>
+      <TextInput disabled source="providerType" />
+      <TextInput disabled source="providerId" />
+      <TextInput disabled source="providerAccountId" />
+      <DateInput disabled source="createdAt" />
+      <DateInput disabled source="updatedAt" />
+    </SimpleForm>
+  </Edit>
+);
+export default AccountEdit;

apps/metamigo-frontend/components/accounts/AccountList.tsx

@@ -0,0 +1,43 @@
+import { FC } from "react";
+import {
+  List,
+  Datagrid,
+  DateField,
+  TextField,
+  ReferenceField,
+  DeleteButton,
+  ListProps,
+} from "react-admin";
+import { useSession } from "next-auth/react";
+
+type DeleteNotSelfButtonProps = {
+  record?: any;
+};
+
+const DeleteNotSelfButton: FC<DeleteNotSelfButtonProps> = (props) => {
+  const { data: session } = useSession();
+  return (
+    <DeleteButton
+      disabled={session?.user?.email === props.record.userId}
+      {...props}
+    />
+  );
+};
+
+export const AccountList = (props: ListProps) => (
+  <List {...props} exporter={false}>
+    <Datagrid rowClick="edit">
+      <ReferenceField source="userId" reference="users">
+        <TextField source="email" />
+      </ReferenceField>
+      <TextField source="providerType" />
+      <TextField source="providerId" />
+      <TextField source="providerAccountId" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+      <DeleteNotSelfButton />
+    </Datagrid>
+  </List>
+);
+
+export default AccountList;

apps/metamigo-frontend/components/accounts/index.ts

@@ -0,0 +1,10 @@
+import AccountIcon from "@material-ui/icons/AccountTree";
+import AccountList from "./AccountList";
+import AccountEdit from "./AccountEdit";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  list: AccountList,
+  edit: AccountEdit,
+  icon: AccountIcon,
+};

apps/metamigo-frontend/components/layout/AppBar.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from "react";
+import { AppBar, UserMenu, MenuItemLink, useTranslate } from "react-admin";
+import Typography from "@material-ui/core/Typography";
+import SettingsIcon from "@material-ui/icons/Settings";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  title: {
+    flex: 1,
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+  },
+  spacer: {
+    flex: 1,
+  },
+});
+
+const ConfigurationMenu = forwardRef<any, any>((props, ref) => {
+  const translate = useTranslate();
+  return (
+    <MenuItemLink
+      ref={ref}
+      to="/configuration"
+      primaryText={translate("pos.configuration")}
+      leftIcon={<SettingsIcon />}
+      onClick={props.onClick}
+      sidebarIsOpen
+    />
+  );
+});
+
+const CustomUserMenu = (props: any) => (
+  <UserMenu {...props}>
+    <ConfigurationMenu />
+  </UserMenu>
+);
+
+const CustomAppBar = (props: any) => {
+  const classes = useStyles();
+  return (
+    <AppBar {...props} elevation={1} userMenu={<CustomUserMenu />}>
+      <Typography
+        variant="h6"
+        color="inherit"
+        className={classes.title}
+        id="react-admin-title"
+      />
+      <span className={classes.spacer} />
+    </AppBar>
+  );
+};
+
+export default CustomAppBar;

apps/metamigo-frontend/components/layout/Layout.tsx

@@ -0,0 +1,21 @@
+import { Layout as RaLayout, LayoutProps, Sidebar } from "react-admin";
+import AppBar from "./AppBar";
+import Menu from "./Menu";
+import { theme } from "./themes";
+
+const CustomSidebar = (props: any) => <Sidebar {...props} size={200} />;
+
+const Layout = (props: LayoutProps) => {
+  return (
+    <RaLayout
+      {...props}
+      appBar={AppBar}
+      menu={Menu}
+      sidebar={CustomSidebar}
+      // @ts-ignore
+      theme={theme}
+    />
+  );
+};
+
+export default Layout;

apps/metamigo-frontend/components/layout/Logo.tsx

@@ -0,0 +1,106 @@
+import { SVGProps } from "react";
+
+const Logo = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg width="220.001" height="43.659" {...props}>
+      <path d="M59.39 24.586h4.6v8.512c-1.058.2-3.743.57-5.742.57-6.398 0-7.74-3.77-7.74-11.452 0-7.827 1.4-11.54 7.797-11.54 3.627 0 8.597.828 8.597.828l.115-2.542s-4.885-1.056-9.083-1.056c-8.312 0-10.626 5.112-10.626 14.31 0 8.968 2.228 14.167 10.711 14.167 3.028 0 8.17-.8 8.998-.971V21.816H59.39zm13.14 11.397h2.998V21.302s3.514-1.943 7.284-2.714V15.56c-3.828.743-7.312 3.142-7.312 3.142v-2.713h-2.97zm27.962-13.967c0-4.342-1.913-6.427-6.455-6.427-3.427 0-7.826.885-7.826.885l.114 2.285s4.77-.542 7.57-.542c2.4 0 3.598 1 3.598 3.799v1.742l-6.284.6c-4.113.4-6.112 2.056-6.112 5.912 0 4.028 2 6.113 5.627 6.113 3.6 0 7.198-1.6 7.198-1.6 1.2 1.2 2.656 1.6 4.77 1.6l.114-2.37c-1.285-.144-2.228-.6-2.314-1.743zm-2.999 3.998v6.599s-3.313 1.256-6.284 1.256c-2.028 0-3.027-1.37-3.027-3.684 0-2.2.942-3.37 3.4-3.6zm17.738-10.425c-2.828 0-5.855 1.4-5.855 1.4V7.277h-2.97v28.677s4.283.429 6.683.429c7.283 0 9.425-2.77 9.425-10.711 0-7.198-1.828-10.083-7.283-10.083zm-2.2 18.109c-1.056 0-3.655-.2-3.655-.2V19.416s2.8-1.142 5.54-1.142c3.514 0 4.57 2.228 4.57 7.398 0 5.598-.97 8.026-6.454 8.026zm28.535-11.682c0-4.342-1.942-6.427-6.455-6.427-3.428 0-7.826.885-7.826.885l.114 2.285s4.77-.542 7.57-.542c2.4 0 3.598 1 3.598 3.799v1.742l-6.284.6c-4.113.4-6.112 2.056-6.112 5.912 0 4.028 2 6.113 5.626 6.113 3.6 0 7.198-1.6 7.198-1.6 1.2 1.2 2.628 1.6 4.77 1.6l.115-2.37c-1.286-.144-2.257-.6-2.314-1.743zm-3 3.998v6.599s-3.34 1.256-6.283 1.256c-2.057 0-3.056-1.37-3.056-3.684 0-2.2.97-3.37 3.4-3.6zm24.25-18.737h-2.94v8.826c-.6-.114-3.2-.514-4.914-.514-6.084 0-8.369 3.513-8.369 10.568 0 8.626 3.285 10.226 7.198 10.226 3 0 6.084-1.771 6.084-1.771v1.37h2.942zm-8.654 26.42c-2.37 0-4.484-1.084-4.484-7.54 0-5.198 1.228-7.97 5.427-7.97 1.657 0 4.113.373 4.77.487v13.539s-2.885 1.485-5.713 1.485zM176.3 15.59c-6.313 0-8.54 3.285-8.54 10.168 0 7.255 1.827 10.626 8.54 10.626 6.77 0 8.57-3.37 8.57-10.626 0-6.883-2.2-10.168-8.57-10.168zm0 18.195c-4.713 0-5.484-2.371-5.484-8.027 0-5.57 1.256-7.57 5.484-7.57 4.284 0 5.484 2 5.484 7.57 0 5.656-.714 8.027-5.484 8.027zm13.453 2.199h3V21.303s3.512-1.943 7.254-2.714V15.56c-3.828.743-7.312 3.142-7.312 3.142V15.99h-2.942zm27.934-13.967c0-4.342-1.913-6.427-6.426-6.427-3.456 0-7.855.885-7.855.885l.143 2.285s4.741-.542 7.54-.542c2.4 0 3.6 1 3.6 3.799v1.742l-6.285.6c-4.113.4-6.112 2.056-6.112 5.912 0 4.028 2 6.113 5.655 6.113 3.6 0 7.198-1.6 7.198-1.6 1.2 1.2 2.628 1.6 4.742 1.6l.114-2.37c-1.257-.144-2.228-.6-2.314-1.743zm-2.999 3.998v6.599s-3.313 1.256-6.284 1.256c-2.028 0-3.027-1.37-3.027-3.684 0-2.2.97-3.37 3.4-3.6z" />
+      <defs>
+        <linearGradient
+          gradientTransform="rotate(25)"
+          id="a"
+          x1="0"
+          y1="0"
+          x2="1"
+          y2="0"
+        >
+          <stop offset="0%" stopColor="#8C48D2" />
+          <stop offset="100%" stopColor="#CF705A" />
+        </linearGradient>
+        <linearGradient
+          xlinkHref="#a"
+          id="c"
+          gradientTransform="scale(.7746 1.291)"
+          x1="15.492"
+          y1="4.648"
+          x2="23.238"
+          y2="4.648"
+          gradientUnits="userSpaceOnUse"
+        />
+        <linearGradient
+          xlinkHref="#a"
+          id="d"
+          gradientTransform="scale(1.27 .7874)"
+          x1="7.874"
+          y1="15.24"
+          x2="15.748"
+          y2="15.24"
+          gradientUnits="userSpaceOnUse"
+        />
+        <linearGradient
+          xlinkHref="#a"
+          id="e"
+          gradientTransform="scale(.91287 1.09545)"
+          x1="10.954"
+          y1="7.303"
+          x2="21.909"
+          y2="7.303"
+          gradientUnits="userSpaceOnUse"
+        />
+        <linearGradient
+          xlinkHref="#a"
+          id="f"
+          gradientTransform="scale(1.13606 .88024)"
+          x1="3.521"
+          y1="13.576"
+          x2="22.886"
+          y2="13.576"
+          gradientUnits="userSpaceOnUse"
+        />
+        <linearGradient
+          xlinkHref="#a"
+          id="g"
+          gradientTransform="scale(1.029 .97183)"
+          x1="5.831"
+          y1="1.029"
+          x2="23.324"
+          y2="1.029"
+          gradientUnits="userSpaceOnUse"
+        />
+        <linearGradient
+          xlinkHref="#a"
+          id="b"
+          gradientTransform="scale(.88647 1.12807)"
+          x1="4.512"
+          y1=".886"
+          x2="29.33"
+          y2=".886"
+          gradientUnits="userSpaceOnUse"
+        />
+      </defs>
+      <g transform="translate(-6.238 -1.56) scale(1.55946)" fill="url(#b)">
+        <path
+          d="M12 9v4a3 3 0 006 0V9a3 3 0 00-6 0zm3-2a2 2 0 012 2v4a2 2 0 11-4 0V9a2 2 0 012-2z"
+          fill="url(#c)"
+        />
+        <path
+          d="M10 13.2a5 5 0 0010 0v-.7a.5.5 0 10-1 0v.7a4 4 0 11-8 0v-.7a.5.5 0 10-1 0z"
+          fill="url(#d)"
+        />
+        <path
+          d="M19.5 13a.5.5 0 100-1h-9a.5.5 0 100 1zm-3 6a.5.5 0 110 1h-3a.5.5 0 110-1h1v-1h1v1zm-3-10a.5.5 0 000-1h-1v1zm0 2a.5.5 0 000-1h-1v1zm3 0a.5.5 0 110-1h1v1zm0-2a.5.5 0 110-1h1v1z"
+          fill="url(#e)"
+        />
+        <path
+          d="M25.947 14.272a.51.51 0 01.053.23v13.994a.5.5 0 01-.5.5h-21a.5.5 0 01-.5-.5V14.502a.502.502 0 01.2-.406L7 11.95v1.26l-2 1.533v1.253l6.667 5h6.666l6.667-5v-1.253l-2-1.533v-1.26l2.8 2.146a.502.502 0 01.147.176zM10.739 21.55L5 27.29V17.245l5.739 4.304zm.968.446h6.586l6 6H5.707zm7.554-.446L25 17.246V27.29l-5.739-5.739z"
+          fill="url(#f)"
+        />
+        <path
+          d="M24 6.2a.5.5 0 00-.146-.354l-4.7-4.7A.5.5 0 0018.8 1H6.5a.5.5 0 00-.5.5V18h1V2h11v4.5a.5.5 0 00.5.5H23v11h1zM19 6V2.41L22.59 6z"
+          fill="url(#g)"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default Logo;

apps/metamigo-frontend/components/layout/Menu.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable camelcase */
+import { FC, useState } from "react";
+import { useSelector } from "react-redux";
+import SecurityIcon from "@material-ui/icons/Security";
+import VoiceIcon from "@material-ui/icons/PhoneInTalk";
+import { Box } from "@material-ui/core";
+import { useTheme } from "@material-ui/core/styles";
+import useMediaQuery from "@material-ui/core/useMediaQuery";
+import { useTranslate, MenuItemLink, MenuProps } from "react-admin";
+import users from "../users";
+import accounts from "../accounts";
+import webhooks from "../webhooks";
+import voiceLines from "../voice/voicelines";
+import voiceProviders from "../voice/providers";
+import whatsappBots from "../whatsapp/bots";
+import signalBots from "../signal/bots";
+import { SubMenu } from "./SubMenu";
+
+type MenuName = "menuVoice" | "menuSecurity";
+
+export const Menu: FC = ({ onMenuClick, logout, dense = false }: any) => {
+  const [state, setState] = useState({
+    menuVoice: false,
+    menuSecurity: false,
+  });
+  const translate = useTranslate();
+  const theme = useTheme();
+  const isXSmall = useMediaQuery(theme.breakpoints.down("xs"));
+  const open = useSelector((state: any) => state.admin.ui.sidebarOpen);
+  useSelector((state: any) => state.theme); // force rerender on theme change
+
+  const handleToggle = (menu: MenuName) => {
+    setState((state) => ({ ...state, [menu]: !state[menu] }));
+  };
+
+  return <div />;
+};
+/*
+    <Box mt={1}>
+      <MenuItemLink
+        to={`/whatsappbots`}
+        primaryText={translate(`pos.menu.whatsapp`, {
+          smart_count: 2,
+        })}
+        leftIcon={<whatsappBots.icon />}
+        onClick={onMenuClick}
+        sidebarIsOpen={open}
+        dense={dense}
+      />
+      <MenuItemLink
+        to={`/signalbots`}
+        primaryText={translate(`pos.menu.signal`, {
+          smart_count: 2,
+        })}
+        leftIcon={<signalBots.icon />}
+        onClick={onMenuClick}
+        sidebarIsOpen={open}
+        dense={dense}
+      />
+      <SubMenu
+        handleToggle={() => handleToggle("menuVoice")}
+        isOpen={state.menuVoice}
+        sidebarIsOpen={open}
+        name="pos.menu.voice"
+        icon={<VoiceIcon />}
+        dense={dense}
+      >
+        <MenuItemLink
+          to={`/voiceproviders`}
+          primaryText={translate(`resources.providers.name`, {
+            smart_count: 2,
+          })}
+          leftIcon={<voiceProviders.icon />}
+          onClick={onMenuClick}
+          sidebarIsOpen={open}
+          dense={dense}
+        />
+        <MenuItemLink
+          to={`/voicelines`}
+          primaryText={translate(`resources.voicelines.name`, {
+            smart_count: 2,
+          })}
+          leftIcon={<voiceLines.icon />}
+          onClick={onMenuClick}
+          sidebarIsOpen={open}
+          dense={dense}
+        />
+      </SubMenu>
+      <MenuItemLink
+        to={`/webhooks`}
+        primaryText={translate(`resources.webhooks.name`, {
+          smart_count: 2,
+        })}
+        leftIcon={<webhooks.icon />}
+        onClick={onMenuClick}
+        sidebarIsOpen={open}
+        dense={dense}
+      />
+      <SubMenu
+        handleToggle={() => handleToggle("menuSecurity")}
+        isOpen={state.menuSecurity}
+        sidebarIsOpen={open}
+        name="pos.menu.security"
+        icon={<SecurityIcon />}
+        dense={dense}
+      >
+        <MenuItemLink
+          to={`/users`}
+          primaryText={translate(`resources.users.name`, {
+            smart_count: 2,
+          })}
+          leftIcon={<users.icon />}
+          onClick={onMenuClick}
+          sidebarIsOpen={open}
+          dense={dense}
+        />
+        <MenuItemLink
+          to={`/accounts`}
+          primaryText={translate(`resources.accounts.name`, {
+            smart_count: 2,
+          })}
+          leftIcon={<accounts.icon />}
+          onClick={onMenuClick}
+          sidebarIsOpen={open}
+          dense={dense}
+        />
+      </SubMenu>
+      {isXSmall && logout}
+    </Box>
+  );
+};
+*/
+export default Menu;

apps/metamigo-frontend/components/layout/SubMenu.tsx

@@ -0,0 +1,83 @@
+import { FC, PropsWithChildren, Fragment, ReactElement } from "react";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import List from "@material-ui/core/List";
+import MenuItem from "@material-ui/core/MenuItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import Typography from "@material-ui/core/Typography";
+import Collapse from "@material-ui/core/Collapse";
+import Tooltip from "@material-ui/core/Tooltip";
+import { makeStyles } from "@material-ui/core/styles";
+import { useTranslate } from "react-admin";
+
+const useStyles = makeStyles((theme) => ({
+  icon: { minWidth: theme.spacing(5) },
+  sidebarIsOpen: {
+    "& a": {
+      paddingLeft: theme.spacing(4),
+      transition: "padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+    },
+  },
+  sidebarIsClosed: {
+    "& a": {
+      paddingLeft: theme.spacing(2),
+      transition: "padding-left 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+    },
+  },
+}));
+
+type SubMenuProps = PropsWithChildren<{
+  dense: boolean;
+  handleToggle: () => void;
+  icon: ReactElement;
+  isOpen: boolean;
+  name: string;
+  sidebarIsOpen: boolean;
+}>;
+
+export const SubMenu: FC<SubMenuProps> = ({
+  handleToggle,
+  sidebarIsOpen,
+  isOpen,
+  name,
+  icon,
+  children,
+  dense,
+}) => {
+  const translate = useTranslate();
+  const classes = useStyles();
+
+  const header = (
+    <MenuItem dense={dense} button onClick={handleToggle}>
+      <ListItemIcon className={classes.icon}>
+        {isOpen ? <ExpandMore /> : icon}
+      </ListItemIcon>
+      <Typography variant="inherit" color="textSecondary">
+        {translate(name)}
+      </Typography>
+    </MenuItem>
+  );
+
+  return (
+    <Fragment>
+      {sidebarIsOpen || isOpen ? (
+        header
+      ) : (
+        <Tooltip title={translate(name)} placement="right">
+          {header}
+        </Tooltip>
+      )}
+      <Collapse in={isOpen} timeout="auto" unmountOnExit>
+        <List
+          dense={dense}
+          component="div"
+          disablePadding
+          className={
+            sidebarIsOpen ? classes.sidebarIsOpen : classes.sidebarIsClosed
+          }
+        >
+          {children}
+        </List>
+      </Collapse>
+    </Fragment>
+  );
+};

apps/metamigo-frontend/components/layout/index.ts

@@ -0,0 +1,5 @@
+import AppBar from "./AppBar";
+import Layout from "./Layout";
+import Menu from "./Menu";
+
+export { AppBar, Layout, Menu };

apps/metamigo-frontend/components/layout/themes.ts

@@ -0,0 +1,71 @@
+export const theme = {
+  palette: {
+    primary: {
+      main: "#337799",
+    },
+    secondary: {
+      light: "#5f5fc4",
+      main: "#283593",
+      dark: "#001064",
+      contrastText: "#fff",
+    },
+    background: {
+      default: "#fff",
+    },
+  },
+  shape: {
+    borderRadius: 5,
+  },
+  typography: {
+    h6: { fontSize: 16, fontWeight: 600, color: "#1bb1bb" },
+  },
+  overrides: {
+    RaMenuItemLink: {
+      root: {
+        borderLeft: "3px solid #fff",
+      },
+      active: {
+        borderLeft: "3px solid #ef7706",
+      },
+    },
+    MuiPaper: {
+      elevation1: {
+        boxShadow: "none",
+      },
+      root: {
+        border: "1px solid #e0e0e3",
+        backgroundClip: "padding-box",
+      },
+    },
+    MuiButton: {
+      contained: {
+        backgroundColor: "#fff",
+        color: "#4f3cc9",
+        boxShadow: "none",
+      },
+    },
+    MuiAppBar: {
+      colorSecondary: {
+        color: "#fff",
+        backgroundColor: "#337799",
+        border: 0,
+      },
+    },
+    MuiLinearProgress: {
+      colorPrimary: {
+        backgroundColor: "#f5f5f5",
+      },
+      barColorPrimary: {
+        backgroundColor: "#d7d7d7",
+      },
+    },
+    MuiFilledInput: {
+      root: {
+        backgroundColor: "rgba(0, 0, 0, 0.04)",
+        "&$disabled": {
+          backgroundColor: "rgba(0, 0, 0, 0.04)",
+        },
+      },
+    },
+  },
+};

apps/metamigo-frontend/components/signal/bots/Digits.module.css

@@ -0,0 +1,27 @@
+.input {
+  width: 40px;
+  height: 60px;
+  margin: 5px;
+  font-size: 1.4rem;
+  padding: 0 9px 0 12px;
+  border: none;
+  outline: none;
+  background: white;
+  font-weight: 400;
+  color: rgba(59, 59, 59, 0.788);
+  -webkit-box-shadow: 2px 2px 2px 1px #d6d6d6, -1px -1px 1px #e6e6e6;
+  box-shadow: 2px 2px 2px 1px #d6d6d6, -1px -1px 1px #e6e6e6;
+  border-radius: 5px;
+}
+
+.group {
+  margin-top: 1.6rem;
+}
+
+.hyphen {
+  background: black;
+  height: 0.1em;
+  width: 1em;
+  margin: 0 0.5em;
+  display: inline-block;
+}

apps/metamigo-frontend/components/signal/bots/SignalBotCreate.tsx

@@ -0,0 +1,34 @@
+import {
+  SimpleForm,
+  Create,
+  TextInput,
+  required,
+  CreateProps,
+} from "react-admin";
+import { useSession } from "next-auth/react";
+import { validateE164Number } from "../../../lib/phone-numbers";
+
+const SignalBotCreate = (props: CreateProps) => {
+  const { data: session } = useSession();
+
+  return (
+    <Create {...props} title="Create Signal Bot">
+      <SimpleForm>
+        <TextInput
+          source="userId"
+          defaultValue={
+            // @ts-expect-error: ID does exist
+            session.user.id
+          }
+        />
+        <TextInput
+          source="phoneNumber"
+          validate={[validateE164Number, required()]}
+        />
+        <TextInput source="description" />
+      </SimpleForm>
+    </Create>
+  );
+};
+
+export default SignalBotCreate;

apps/metamigo-frontend/components/signal/bots/SignalBotEdit.tsx

@@ -0,0 +1,12 @@
+import { SimpleForm, Edit, TextInput, required, EditProps } from "react-admin";
+
+const SignalBotEdit = (props: EditProps) => (
+  <Edit {...props} title="Edit Bot">
+    <SimpleForm>
+      <TextInput disabled source="phoneNumber" validate={[required()]} />
+      <TextInput source="description" />
+    </SimpleForm>
+  </Edit>
+);
+
+export default SignalBotEdit;

apps/metamigo-frontend/components/signal/bots/SignalBotList.tsx

@@ -0,0 +1,23 @@
+import {
+  List,
+  Datagrid,
+  DateField,
+  TextField,
+  BooleanField,
+  ListProps,
+} from "react-admin";
+
+const SignalBotList = (props: ListProps) => (
+  <List {...props} exporter={false}>
+    <Datagrid rowClick="show">
+      <TextField source="phoneNumber" />
+      <TextField source="description" />
+      <BooleanField source="isVerified" />
+      <DateField source="createdAt" />
+      <DateField source="updatedAt" />
+      <TextField source="createdBy" />
+    </Datagrid>
+  </List>
+);
+
+export default SignalBotList;

apps/metamigo-frontend/components/signal/bots/SignalBotShow.tsx

@@ -0,0 +1,474 @@
+import React, { useState } from "react";
+import {
+  Show,
+  SimpleShowLayout,
+  BooleanField,
+  TextField,
+  ShowProps,
+  EditButton,
+  TopToolbar,
+  useTranslate,
+  useRefresh,
+} from "react-admin";
+import {
+  TextField as MuiTextField,
+  Button,
+  Card,
+  Grid,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Typography,
+  Box,
+  CircularProgress,
+} from "@material-ui/core";
+import { SixDigitInput } from "../../DigitInput";
+import {
+  sanitizeE164Number,
+  isValidE164Number,
+} from "../../../lib/phone-numbers";
+
+const Sidebar = ({ record }: any) => {
+  const [phoneNumber, setPhoneNumber] = useState("");
+  const [errorNumber, setErrorNumber] = useState(false);
+  const handlePhoneNumberChange = (event: any) => {
+    setPhoneNumber(event.target.value);
+  };
+
+  const [message, setMessage] = useState("");
+  const handleMessageChange = (event: any) => {
+    setMessage(event.target.value);
+  };
+
+  const sendMessage = async (phoneNumber: string, message: string) => {
+    await fetch(`/api/v1/signal/bots/${record.token}/send`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ phoneNumber, message }),
+    });
+  };
+
+  const resetSession = async (phoneNumber: string) => {
+    await fetch(`/api/v1/signal/bots/${record.token}/resetSession`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ phoneNumber }),
+    });
+  };
+
+  const handleBlurNumber = () => {
+    setErrorNumber(!isValidE164Number(sanitizeE164Number(phoneNumber)));
+  };
+
+  const handleSend = () => {
+    const sanitized = sanitizeE164Number(phoneNumber);
+    if (isValidE164Number(sanitized)) {
+      setErrorNumber(false);
+      sendMessage(sanitized, message);
+    } else setErrorNumber(false);
+  };
+
+  const handleResetSession = () => {
+    const sanitized = sanitizeE164Number(phoneNumber);
+    if (isValidE164Number(sanitized)) {
+      setErrorNumber(false);
+      resetSession(sanitized);
+    } else setErrorNumber(false);
+  };
+
+  return (
+    <Card style={{ width: "33%", marginLeft: 20, padding: 14 }}>
+      <Grid container direction="column" spacing={2}>
+        <Grid item>
+          <Typography variant="h6">Send message</Typography>
+        </Grid>
+        <Grid item>
+          <MuiTextField
+            variant="outlined"
+            label="Phone number"
+            fullWidth
+            size="small"
+            error={errorNumber}
+            onBlur={handleBlurNumber}
+            value={phoneNumber}
+            onChange={handlePhoneNumberChange}
+          />
+        </Grid>
+        <Grid item>
+          <MuiTextField
+            variant="outlined"
+            label="Message"
+            multiline
+            rows={3}
+            fullWidth
+            size="small"
+            value={message}
+            onChange={handleMessageChange}
+          />
+        </Grid>
+        <Grid item container direction="row-reverse">
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => handleSend()}
+          >
+            Send
+          </Button>
+          <Button variant="contained" onClick={() => handleResetSession()}>
+            Reset Session
+          </Button>
+        </Grid>
+      </Grid>
+    </Card>
+  );
+};
+
+const MODE = {
+  SMS: "SMS",
+  VOICE: "VOICE",
+};
+
+const handleRequestCode = async ({
+  verifyMode,
+  id,
+  onSuccess,
+  onFailure,
+  captchaCode = undefined,
+}: any) => {
+  if (verifyMode === MODE.SMS) console.log("REQUESTING sms");
+  else if (verifyMode === MODE.VOICE) console.log("REQUESTING voice");
+  let response: Response;
+  let url = `/api/v1/signal/bots/${id}/requestCode?mode=${verifyMode.toLowerCase()}`;
+  if (captchaCode) {
+    url += `&captcha=${captchaCode}`;
+  }
+
+  try {
+    response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  } catch (error: any) {
+    console.error("Failed to request verification code:", error);
+  }
+
+  if (response && response.ok) {
+    onSuccess();
+  } else {
+    onFailure(response.status || 400);
+  }
+};
+
+const VerificationCodeRequest = ({
+  verifyMode,
+  data,
+  onSuccess,
+  onFailure,
+}: any) => {
+  React.useEffect(() => {
+    (async () => {
+      await handleRequestCode({
+        verifyMode,
+        id: data.id,
+        onSuccess,
+        onFailure,
+      });
+    })();
+  }, []);
+
+  return (
+    <>
+      <DialogTitle id="form-dialog-title">
+        Requesting code for {data.phoneNumber}
+      </DialogTitle>
+      <DialogContent>
+        <Box display="flex">
+          <Box m="auto">
+            <CircularProgress />
+          </Box>
+        </Box>
+      </DialogContent>
+    </>
+  );
+};
+
+const VerificationCaptcha = ({
+  verifyMode,
+  data,
+  onSuccess,
+  onFailure,
+  handleClose,
+}: any) => {
+  const [code, setCode] = React.useState(undefined);
+  const [isSubmitting, setSubmitting] = React.useState(false);
+
+  const handleSubmitVerification = async () => {
+    setSubmitting(true);
+    await handleRequestCode({
+      verifyMode,
+      id: data.id,
+      onSuccess,
+      onFailure,
+      captchaCode: code,
+    });
+    setSubmitting(false);
+  };
+
+  const handleCaptchaChange = (value) => {
+    if (value)
+      setCode(
+        value
+          .replace(/signalcaptcha:\/\//, "")
+          .replace("“", "")
+          .replace("”", "")
+          .trim()
+      );
+    else setCode(value);
+  };
+
+  return (
+    <>
+      <DialogTitle id="form-dialog-title">
+        Captcha for {data.phoneNumber}
+      </DialogTitle>
+      <DialogContent>
+        <MuiTextField
+          value={code}
+          onChange={(ev) => handleCaptchaChange(ev.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        {isSubmitting && <CircularProgress />}
+        {!isSubmitting && (
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+        )}
+        {!isSubmitting && (
+          <Button onClick={handleSubmitVerification} color="primary">
+            Request
+          </Button>
+        )}
+      </DialogActions>
+    </>
+  );
+};
+
+const VerificationCodeInput = ({
+  data,
+  verifyMode,
+  handleClose,
+  handleRestartVerification,
+  confirmVerification,
+}) => {
+  const [code, setValue] = React.useState("");
+  const [isSubmitting, setSubmitting] = React.useState(false);
+  const [isValid, setValid] = React.useState(false);
+  const [submissionError, setSubmissionError] = React.useState(undefined);
+  const translate = useTranslate();
+
+  const validator = (v) => v.trim().length === 6;
+
+  const handleValueChange = (newValue) => {
+    setValue(newValue);
+    setValid(validator(newValue));
+  };
+
+  const handleSubmitVerification = async () => {
+    setSubmitting(true);
+    // await sleep(2000)
+    const response = await fetch(
+      `/api/v1/signal/bots/${data.id}/register?code=${code}`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+    setSubmitting(false);
+    const responseBody = await response.json();
+    console.log(responseBody);
+    if (response.status === 200) {
+      confirmVerification();
+    } else if (responseBody.message)
+      setSubmissionError(`Error: ${responseBody.message}`);
+    else
+      setSubmissionError(
+        "There was an error, sorry about that. Please try again later or contact support."
+      );
+  };
+
+  const title =
+    verifyMode === MODE.SMS
+      ? translate("resources.signalBots.verifyDialog.sms", {
+          phoneNumber: data.phoneNumber,
+        })
+      : translate("resources.signalBots.verifyDialog.voice", {
+          phoneNumber: data.phoneNumber,
+        });
+  return (
+    <>
+      <DialogTitle id="form-dialog-title">
+        Verify {data.phoneNumber}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>{title}</DialogContentText>
+        <SixDigitInput value={code} onChange={handleValueChange} />
+        {submissionError && (
+          <Typography variant="body1" gutterBottom color="error">
+            {submissionError}
+          </Typography>
+        )}
+      </DialogContent>
+      <DialogActions>
+        {isSubmitting && <CircularProgress />}
+        {!isSubmitting && (
+          <Button onClick={handleClose} color="primary">
+            Cancel
+          </Button>
+        )}
+        {!isSubmitting && (
+          <Button onClick={handleRestartVerification} color="primary">
+            Restart
+          </Button>
+        )}
+        {!isSubmitting && (
+          <Button
+            onClick={handleSubmitVerification}
+            color="primary"
+            disabled={!isValid}
+          >
+            Verify
+          </Button>
+        )}
+      </DialogActions>
+    </>
+  );
+};
+
+const VerificationCodeDialog = (props) => {
+  const [stage, setStage] = React.useState("request");
+  const onRequestSuccess = () => setStage("verify");
+  const onRestartVerification = () => setStage("request");
+  const handleClose = () => {
+    setStage("request");
+    props.handleClose();
+  };
+
+  const onFailure = (code: number) => {
+    if (code === 402 || code === 500) {
+      setStage("captcha");
+    } else {
+      setStage("request");
+    }
+  };
+
+  return (
+    <Dialog
+      open={props.open}
+      onClose={props.handleClose}
+      aria-labelledby="form-dialog-title"
+    >
+      {props.open && stage === "request" && (
+        <VerificationCodeRequest
+          mode={props.verifyMode}
+          onSuccess={onRequestSuccess}
+          onFailure={onFailure}
+          {...props}
+        />
+      )}
+      {props.open && stage === "verify" && (
+        <VerificationCodeInput
+          {...props}
+          handleRestartVerification={onRestartVerification}
+          handleClose={handleClose}
+        />
+      )}
+      {props.open && stage === "captcha" && (
+        <VerificationCaptcha
+          mode={props.verifyMode}
+          onSuccess={onRequestSuccess}
+          onFailure={onRestartVerification}
+          handleClose={handleClose}
+          {...props}
+        />
+      )}
+    </Dialog>
+  );
+};
+
+const SignalBotShowActions = ({ basePath, data }) => {
+  const [open, setOpen] = React.useState(false);
+  const [verifyMode, setVerifyMode] = React.useState("");
+  const refresh = useRefresh();
+
+  const handleOpenSMS = () => {
+    setVerifyMode(MODE.SMS);
+    setOpen(true);
+  };
+
+  const handleOpenVoice = () => {
+    setVerifyMode(MODE.VOICE);
+    setOpen(true);
+  };
+
+  const handleClose = () => setOpen(false);
+  const confirmVerification = () => {
+    setOpen(false);
+    refresh();
+  };
+
+  return (
+    <TopToolbar>
+      <EditButton basePath={basePath} record={data} />
+      {data && !data.isVerified && (
+        <Button onClick={handleOpenSMS} color="primary">
+          Verify with SMS
+        </Button>
+      )}
+      {data && !data.isVerified && (
+        <Button onClick={handleOpenVoice} color="primary">
+          Verify with Voice
+        </Button>
+      )}
+      {data && !data.isVerified && (
+        <VerificationCodeDialog
+          data={data}
+          verifyMode={verifyMode}
+          handleClose={handleClose}
+          open={open}
+          confirmVerification={confirmVerification}
+        />
+      )}
+    </TopToolbar>
+  );
+};
+
+const SignalBotShow = (props: ShowProps) => (
+  <Show
+    // @ts-expect-error: Missing props
+    actions={<SignalBotShowActions />}
+    {...props}
+    title="Signal Bot"
+    // @ts-expect-error: Missing props
+    aside={<Sidebar />}
+  >
+    <SimpleShowLayout>
+      <TextField source="phoneNumber" />
+      <BooleanField source="isVerified" />
+      <TextField source="description" />
+      <TextField source="token" />
+    </SimpleShowLayout>
+  </Show>
+);
+
+export default SignalBotShow;

apps/metamigo-frontend/components/signal/bots/index.ts

@@ -0,0 +1,14 @@
+import SignalBotIcon from "@material-ui/icons/ChatOutlined";
+import SignalBotList from "./SignalBotList";
+import SignalBotEdit from "./SignalBotEdit";
+import SignalBotCreate from "./SignalBotCreate";
+import SignalBotShow from "./SignalBotShow";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  list: SignalBotList,
+  create: SignalBotCreate,
+  edit: SignalBotEdit,
+  show: SignalBotShow,
+  icon: SignalBotIcon,
+};

apps/metamigo-frontend/components/signal/bots/shared.tsx

@@ -0,0 +1,24 @@
+import {
+  SelectInput,
+  required,
+  ReferenceInput,
+  ReferenceField,
+  TextField,
+} from "react-admin";
+
+export const SignalBotSelectInput = (source: string) => () => (
+  <ReferenceInput
+    label="Signal Bot"
+    source={source}
+    reference="signalBots"
+    validate={[required()]}
+  >
+    <SelectInput optionText="phoneNumber" />
+  </ReferenceInput>
+);
+
+export const SignalBotField = (source: string) => () => (
+  <ReferenceField label="Signal Bot" reference="signalBots" source={source}>
+    <TextField source="phoneNumber" />
+  </ReferenceField>
+);

apps/metamigo-frontend/components/users/UserCreate.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+import {
+  SimpleForm,
+  TextInput,
+  BooleanInput,
+  Create,
+  CreateProps,
+} from "react-admin";
+import { useSession } from "next-auth/react";
+import { UserRoleInput } from "./shared";
+
+const UserCreate: FC<CreateProps> = (props) => {
+  const { data: session } = useSession();
+  return (
+    <Create {...props} title="Create Users">
+      <SimpleForm>
+        <TextInput source="email" />
+        <TextInput source="name" />
+        <UserRoleInput session={session} initialValue="NONE" />
+        <BooleanInput source="isActive" defaultValue={true} />
+        <TextInput source="createdBy" defaultValue={session.user.name} />
+      </SimpleForm>
+    </Create>
+  );
+};
+
+export default UserCreate;