refactor(admin-panel): move entity tightly coupled to entities into app

apps/admin-panel/app/customers/[customer-id]/customer-deposits-table.tsx → apps/admin-panel/app/customers/[customer-id]/deposits.tsx

@@ -20,9 +20,10 @@ import {
 } from "@/components/primitive/table"
 import { useGetDepositsForCustomerQuery } from "@/lib/graphql/generated"
 import { Button } from "@/components/primitive/button"
-import RecordDepositDialog from "@/components/customer/record-deposit-dialog"
 import Balance from "@/components/balance/balance"
 
+import { RecordDepositDialog } from "@/app/deposits/record"
+
 gql`
   query GetDepositsForCustomer($id: UUID!) {
     customer(id: $id) {

apps/admin-panel/app/customers/[customer-id]/customer-loans-table.tsx → apps/admin-panel/app/customers/[customer-id]/loans.tsx

@@ -26,16 +26,12 @@ import {
   useGetLoansForCustomerQuery,
 } from "@/lib/graphql/generated"
 import { Button } from "@/components/primitive/button"
-import { CreateLoanDialog } from "@/components/loan/create-loan-dialog"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/primitive/dropdown-menu"
-import { LoanPartialPaymentDialog } from "@/components/loan/loan-partial-payment"
-import { LoanApproveDialog } from "@/components/loan/approve-loan"
-import { LoanBadge } from "@/components/loan/loan-badge"
 import {
   Collapsible,
   CollapsibleTrigger,
@@ -44,7 +40,12 @@ import {
 import { DetailItem } from "@/components/details"
 import { formatInterval, formatPeriod } from "@/lib/utils"
 import Balance from "@/components/balance/balance"
-import { CollateralUpdateDialog } from "@/components/loan/collateral-update-dialog"
+
+import { CreateLoanDialog } from "@/app/loans/create"
+import { CollateralUpdateDialog } from "@/app/loans/update-collateral"
+import { LoanStatusBadge } from "@/app/loans/status-badge"
+import { LoanPartialPaymentDialog } from "@/app/loans/partial-payment"
+import { LoanApproveDialog } from "@/app/loans/approve"
 
 type LoanRowProps = {
   loanId: string
@@ -210,7 +211,7 @@ const LoanRow = ({ loan, refetch }: { loan: LoanRowProps; refetch: () => void })
               <Balance amount={loan.balance.outstanding.usdBalance} currency="usd" />
             </TableCell>
             <TableCell>
-              <LoanBadge status={loan.status} />
+              <LoanStatusBadge status={loan.status} />
             </TableCell>
             <TableCell>
               <DropdownMenu>

apps/admin-panel/app/customers/[customer-id]/page.tsx

@@ -1,13 +1,10 @@
-import { CustomerDetailsCard } from "./customer-details-card"
-import { CustomerLoansTable } from "./customer-loans-table"
-
-import { CustomerDepositsTable } from "./customer-deposits-table"
-
-import { CustomerWithdrawalsTable } from "./customer-withdrawls-table"
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/primitive/tab"
+import { CustomerDetailsCard } from "./details"
+import { CustomerLoansTable } from "./loans"
+import { CustomerDepositsTable } from "./deposits"
+import { CustomerWithdrawalsTable } from "./withdrawals"
 
 import { PageHeading } from "@/components/page-heading"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/primitive/tab"
 
 function customerDetails({
   params,

apps/admin-panel/app/customers/[customer-id]/customer-withdrawls-table.tsx → apps/admin-panel/app/customers/[customer-id]/withdrawals.tsx

@@ -20,13 +20,13 @@ import {
 } from "@/components/primitive/table"
 import { useGetWithdrawalsForCustomerQuery } from "@/lib/graphql/generated"
 import { Button } from "@/components/primitive/button"
-import WithdrawalInitiateDialog from "@/components/customer/withdrawal-initiate-dialog"
-import { WithdrawalConfirmDialog } from "@/components/customer/withdrawal-confirm-dialog"
-
 import Balance from "@/components/balance/balance"
+
 import WithdrawalDropdown from "@/app/withdrawals/drop-down"
-import { WithdrawalStatusBadge } from "@/components/withdrawal/withdrawal-status-badge"
-import { WithdrawalCancelDialog } from "@/components/withdrawal/cancel-withdrawal-dialog"
+import { WithdrawalStatusBadge } from "@/app/withdrawals/status-badge"
+import { WithdrawalInitiateDialog } from "@/app/withdrawals/initiate"
+import { WithdrawalConfirmDialog } from "@/app/withdrawals/confirm"
+import { WithdrawalCancelDialog } from "@/app/withdrawals/cancel"
 
 gql`
   query GetWithdrawalsForCustomer($id: UUID!) {

apps/admin-panel/components/customer/create-customer-dialog/index.tsx → apps/admin-panel/app/customers/create.tsx

@@ -30,15 +30,17 @@ gql`
   }
 `
 
-function CreateCustomerDialog({
-  setOpenCreateCustomerDialog,
-  openCreateCustomerDialog,
-  refetch,
-}: {
+type CreateCustomerDialogProps = {
   setOpenCreateCustomerDialog: (isOpen: boolean) => void
   openCreateCustomerDialog: boolean
   refetch?: () => void
-}) {
+}
+
+export const CreateCustomerDialog: React.FC<CreateCustomerDialogProps> = ({
+  setOpenCreateCustomerDialog,
+  openCreateCustomerDialog,
+  refetch,
+}) => {
   const router = useRouter()
 
   const [createCustomer, { loading, reset }] = useCustomerCreateMutation()
@@ -111,5 +113,3 @@ function CreateCustomerDialog({
     </Dialog>
   )
 }
-
-export default CreateCustomerDialog

apps/admin-panel/app/customers/customer-table.tsx → apps/admin-panel/app/customers/list.tsx

@@ -26,11 +26,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/primitive/dropdown-menu"
-import { CreateLoanDialog } from "@/components/loan/create-loan-dialog"
-import WithdrawalInitiateDialog from "@/components/customer/withdrawal-initiate-dialog"
-import RecordDepositDialog from "@/components/customer/record-deposit-dialog"
 import Balance from "@/components/balance/balance"
 
+import { CreateLoanDialog } from "@/app/loans/create"
+import { WithdrawalInitiateDialog } from "@/app/withdrawals/initiate"
+import { RecordDepositDialog } from "@/app/deposits/record"
+
 type CustomerType = NonNullable<CustomersQuery["customers"]["nodes"][number]>
 
 function CustomerTable({

apps/admin-panel/app/customers/page.tsx

@@ -4,12 +4,12 @@ import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { gql } from "@apollo/client"
 
-import CustomerTable from "./customer-table"
+import CustomerTable from "./list"
+import { CreateCustomerDialog } from "./create"
 
 import { Input } from "@/components/primitive/input"
 import { Button } from "@/components/primitive/button"
 import { PageHeading } from "@/components/page-heading"
-import CreateCustomerDialog from "@/components/customer/create-customer-dialog"
 import { isEmail, isUUID } from "@/lib/utils"
 
 gql`
@@ -67,7 +67,7 @@ function CustomerPage({ searchParams }: { searchParams: { search?: string } }) {
         searchType = "email"
       }
       router.push(
-        `/customer?search=${encodeURIComponent(searchInput)}&searchType=${searchType}`,
+        `/customers?search=${encodeURIComponent(searchInput)}&searchType=${searchType}`,
       )
     } else {
       router.push("/customers")

apps/admin-panel/components/customer/record-deposit-dialog/index.tsx → apps/admin-panel/app/deposits/record.tsx

@@ -41,17 +41,19 @@ gql`
   }
 `
 
-function RecordDepositDialog({
-  setOpenRecordDepositDialog,
-  openRecordDepositDialog,
-  customerId,
-  refetch,
-}: {
+type RecordDepositDialgProps = {
   setOpenRecordDepositDialog: (isOpen: boolean) => void
   openRecordDepositDialog: boolean
   customerId: string
   refetch?: () => void
-}) {
+}
+
+export const RecordDepositDialog: React.FC<RecordDepositDialgProps> = ({
+  setOpenRecordDepositDialog,
+  openRecordDepositDialog,
+  customerId,
+  refetch,
+}) => {
   const [recordDeposit, { loading, reset }] = useRecordDepositMutation()
   const [amount, setAmount] = useState<string>("")
   const [reference, setReference] = useState<string>("")
@@ -149,5 +151,3 @@ function RecordDepositDialog({
     </Dialog>
   )
 }
-
-export default RecordDepositDialog

apps/admin-panel/app/loans/[loan-id]/loan-details.tsx → apps/admin-panel/app/loans/[loan-id]/details.tsx

@@ -5,11 +5,14 @@ import { useEffect, useState } from "react"
 
 import Link from "next/link"
 
+import { CollateralUpdateDialog } from "../update-collateral"
+import { CollateralizationStateUpdateDialog } from "../update-collateralization-state"
+import { LoanStatusBadge } from "../status-badge"
+import { LoanPartialPaymentDialog } from "../partial-payment"
+import { LoanApproveDialog } from "../approve"
+
 import Balance from "@/components/balance/balance"
 import { DetailItem } from "@/components/details"
-import { LoanApproveDialog } from "@/components/loan/approve-loan"
-import { LoanBadge } from "@/components/loan/loan-badge"
-import { LoanPartialPaymentDialog } from "@/components/loan/loan-partial-payment"
 import { Button } from "@/components/primitive/button"
 import {
   Card,
@@ -27,6 +30,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/primitive/table"
+
 import {
   LoanStatus,
   useGetLoanDetailsQuery,
@@ -37,8 +41,6 @@ import {
   CollateralAction,
 } from "@/lib/graphql/generated"
 import { formatInterval, formatPeriod, currencyConverter, formatDate } from "@/lib/utils"
-import { CollateralUpdateDialog } from "@/components/loan/collateral-update-dialog"
-import { CollateralizationStateUpdateDialog } from "@/components/loan/collateralization-state-update-dialog"
 
 gql`
   query GetLoanDetails($id: UUID!) {
@@ -260,7 +262,7 @@ const LoanDetails: React.FC<LoanDetailsProps> = ({ loanId }) => {
                 </p>
               </div>
               <div className="flex flex-col gap-2">
-                <LoanBadge status={loanDetails.loan.status} className="p-1 px-4" />
+                <LoanStatusBadge status={loanDetails.loan.status} className="p-1 px-4" />
               </div>
             </CardHeader>
             <Separator className="mb-6" />

apps/admin-panel/app/loans/[loan-id]/page.tsx

@@ -1,4 +1,4 @@
-import LoanDetailsCard from "./loan-details"
+import LoanDetailsCard from "./details"
 
 import { PageHeading } from "@/components/page-heading"
 

apps/admin-panel/components/loan/approve-loan/index.tsx → apps/admin-panel/app/loans/approve.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import { gql } from "@apollo/client"
 import { FaExclamationCircle } from "react-icons/fa"
 
@@ -44,15 +45,14 @@ gql`
   }
 `
 
-export const LoanApproveDialog = ({
-  loanDetails,
-  children,
-  refetch,
-}: {
+type LoanApproveDialogProps = {
   loanDetails: Loan
-  children: React.ReactNode
   refetch?: () => void
-}) => {
+}
+
+export const LoanApproveDialog: React.FC<
+  React.PropsWithChildren<LoanApproveDialogProps>
+> = ({ loanDetails, children, refetch }) => {
   const { data: priceInfo } = useGetRealtimePriceUpdatesQuery({
     fetchPolicy: "cache-only",
   })

apps/admin-panel/components/loan/create-loan-dialog/index.tsx → apps/admin-panel/app/loans/create.tsx

@@ -1,5 +1,5 @@
 import { gql } from "@apollo/client"
-import { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import { toast } from "sonner"
 import { useRouter } from "next/navigation"
 import { PiPencilSimpleLineLight } from "react-icons/pi"
@@ -62,15 +62,14 @@ gql`
   }
 `
 
-export const CreateLoanDialog = ({
-  customerId,
-  children,
-  refetch,
-}: {
+type CreateLoanDialogProps = {
   customerId: string
-  children: React.ReactNode
   refetch?: () => void
-}) => {
+}
+
+export const CreateLoanDialog: React.FC<
+  React.PropsWithChildren<CreateLoanDialogProps>
+> = ({ customerId, children, refetch }) => {
   const router = useRouter()
 
   const { data: priceInfo } = useGetRealtimePriceUpdatesQuery({

apps/admin-panel/app/loans/loans-table.tsx

@@ -4,6 +4,8 @@ import { gql } from "@apollo/client"
 import { IoEllipsisHorizontal } from "react-icons/io5"
 import Link from "next/link"
 
+import { LoanStatusBadge } from "./status-badge"
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -23,7 +25,6 @@ import {
 } from "@/components/primitive/table"
 import { formatDate } from "@/lib/utils"
 import Balance from "@/components/balance/balance"
-import { LoanBadge } from "@/components/loan/loan-badge"
 
 gql`
   query Loans($first: Int!, $after: String) {
@@ -128,7 +129,7 @@ const LoansTable = () => {
                     </div>
                   </TableCell>
                   <TableCell>
-                    <LoanBadge status={loan.status} className="p-1 px-4" />
+                    <LoanStatusBadge status={loan.status} className="p-1 px-4" />
                   </TableCell>
                   <TableCell>
                     <DropdownMenu>

apps/admin-panel/components/loan/loan-partial-payment/index.tsx → apps/admin-panel/app/loans/partial-payment.tsx

@@ -1,7 +1,10 @@
 import { gql } from "@apollo/client"
-import { useState } from "react"
+import React, { useState } from "react"
 import { toast } from "sonner"
 
+import { useLoanPartialPaymentMutation } from "@/lib/graphql/generated"
+import { currencyConverter } from "@/lib/utils"
+
 import {
   Dialog,
   DialogContent,
@@ -13,9 +16,7 @@ import {
 } from "@/components/primitive/dialog"
 import { Input } from "@/components/primitive/input"
 import { Label } from "@/components/primitive/label"
-import { useLoanPartialPaymentMutation } from "@/lib/graphql/generated"
 import { Button } from "@/components/primitive/button"
-import { currencyConverter } from "@/lib/utils"
 
 gql`
   mutation loanPartialPayment($input: LoanPartialPaymentInput!) {
@@ -40,15 +41,14 @@ gql`
   }
 `
 
-export const LoanPartialPaymentDialog = ({
-  loanId,
-  refetch,
-  children,
-}: {
+type LoanPartialPaymentDialogProps = {
   loanId: string
   refetch?: () => void
-  children: React.ReactNode
-}) => {
+}
+
+export const LoanPartialPaymentDialog: React.FC<
+  React.PropsWithChildren<LoanPartialPaymentDialogProps>
+> = ({ loanId, refetch, children }) => {
   const [loanIdValue, setLoanIdValue] = useState<string>(loanId)
   const [amount, setAmount] = useState<number>(0)
   const [open, setOpen] = useState<boolean>(false)