fix: admin edit with mock data

- add admin list of campaign applications (initial draft)
- add admin only edit for campaign application (change status, external URL)
- goal is to show the UI/UX to team and get early feedback

public/locales/bg/campaign-application.json

@@ -6,6 +6,11 @@
       "phone": "Телефон за връзка",
       "email": "Email",
       "transparencyTerms": "Потвърждавам, че кампанията отговаря на основните принципи за публикуване на платформата: да е законна, да е морална, да не е с бизнес насоченост."
+    },
+    "admin": {
+      "title": "Администраторска редакция",
+      "status": "Статус",
+      "external-url": "Външен линк"
     }
   },
   "cta": {

public/locales/en/campaign-application.json

@@ -6,6 +6,11 @@
       "phone": "Contact phone",
       "email": "Email",
       "transparencyTerms": "I confirm that the campaign meets the basic principles for publishing on the platform: it is legal, it is moral, and it is not business-oriented."
+    },
+    "admin": {
+      "title": "Admin edit",
+      "status": "Status",
+      "external-url": "External URL"
     }
   },
   "cta": {

src/components/admin/campaign-applications/CampaignApplicationAdminPropsEdit.tsx

@@ -0,0 +1,33 @@
+import { useTranslation } from 'next-i18next'
+
+import { Grid } from '@mui/material'
+import {
+  StyledFormTextField,
+  StyledStepHeading,
+} from 'components/client/campaign-application/helpers/campaignApplication.styled'
+
+export default function CampaignApplicationAdminPropsEdit() {
+  const { t } = useTranslation('campaign-application')
+
+  return (
+    <Grid container spacing={6} justifyContent="center" direction="column" alignContent="center">
+      <Grid item container justifyContent="center">
+        <StyledStepHeading variant="h4">{t('steps.admin.title')}</StyledStepHeading>
+      </Grid>
+      <Grid item container spacing={6} justifyContent="space-between" direction="row">
+        <Grid item xs={12}>
+          <StyledFormTextField label={t('steps.admin.status')} type="text" name="status" />
+        </Grid>
+      </Grid>
+      <Grid item container spacing={6} justifyContent="space-between" direction="row">
+        <Grid container item xs={12} md={6}>
+          <StyledFormTextField
+            label={t('steps.admin.external-url')}
+            type="phone"
+            name="ticketUrl"
+          />
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}

src/components/admin/campaign-applications/CampaignApplications.tsx

@@ -1,25 +1,16 @@
 import { useTranslation } from 'next-i18next'
 
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined'
-import { IconButton } from '@mui/material'
-import { routes } from 'common/routes'
 import AdminContainer from 'components/common/navigation/AdminContainer'
 import AdminLayout from 'components/common/navigation/AdminLayout'
-import Link from 'next/link'
+import CampaignApplicationsGrid from './CampaignApplicationsGrid'
 
 export default function CampaignApplicationsPage() {
   const { t } = useTranslation('campaigns')
 
   return (
     <AdminLayout>
       <AdminContainer title={t('Кандидат Кампании')}>
-        <div>Campaigns will appear here</div>
-        <Link href={routes.admin.campaignApplications.edit('mock-id')} passHref>
-          <IconButton size="small" color="primary">
-            <EditOutlinedIcon />
-            takes you to edit page
-          </IconButton>
-        </Link>
+        <CampaignApplicationsGrid />
       </AdminContainer>
     </AdminLayout>
   )

src/components/admin/campaign-applications/CampaignApplicationsGrid.tsx

@@ -0,0 +1,146 @@
+import { useTranslation } from 'next-i18next'
+
+import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid'
+import { routes } from 'common/routes'
+import theme from 'common/theme'
+import Link from 'next/link'
+
+export default function CampaignApplicationsGrid() {
+  const { t, i18n } = useTranslation()
+
+  const commonProps: Partial<GridColDef> = {
+    align: 'left',
+    width: 100,
+    headerAlign: 'left',
+  }
+
+  const columns: GridColDef[] = [
+    {
+      field: 'status',
+      headerName: t('campaigns:status'),
+      ...commonProps,
+      align: 'left',
+      width: 220,
+    },
+    {
+      field: 'title',
+      headerName: t('campaigns:title'),
+      ...commonProps,
+      align: 'left',
+      width: 250,
+      renderCell: (cellValues: GridRenderCellParams) => (
+        <Link href={routes.admin.campaignApplications.edit(cellValues.id.toString())}>
+          {cellValues.row.title}
+        </Link>
+      ),
+    },
+    {
+      field: 'essence',
+      headerName: t('campaigns:essence'),
+      ...commonProps,
+      align: 'left',
+      width: 250,
+    },
+    {
+      field: 'organizer',
+      headerName: t('campaigns:organizer'),
+      ...commonProps,
+      align: 'left',
+      width: 200,
+    },
+    {
+      field: 'beneficiary',
+      headerName: t('campaigns:beneficiary'),
+      ...commonProps,
+      align: 'left',
+      width: 200,
+    },
+    {
+      field: 'createdAt',
+      headerName: t('campaigns:createDate'),
+      align: 'left',
+      width: 230,
+      headerAlign: 'left',
+    },
+    {
+      field: 'updatedAt',
+      headerName: t('campaigns:updatedAt'),
+      align: 'left',
+      width: 230,
+      headerAlign: 'left',
+    },
+  ]
+
+  const data = [
+    {
+      updatedAt: 'date',
+      createdAt: '2024-5-5',
+      beneficiary: 'beneficiary',
+      organizer: 'organizer',
+      essence: 'essence',
+      title: 'title',
+      id: '1',
+      status: 'нова',
+    },
+    {
+      updatedAt: 'yesterday',
+      createdAt: '10 days ago',
+      beneficiary: 'beneficiary',
+      organizer: 'organizer',
+      essence: 'essence',
+      title: 'title',
+      id: '2',
+      status: 'очаква документи',
+    },
+    {
+      updatedAt: '',
+      createdAt: '',
+      beneficiary: 'beneficiary',
+      organizer: 'organizer',
+      essence: 'essence',
+      title: 'title',
+      id: '3',
+      status: 'очаква решение на комисия',
+    },
+
+    {
+      updatedAt: '',
+      createdAt: '',
+      beneficiary: 'beneficiary',
+      organizer: 'organizer',
+      essence: 'essence',
+      title: 'title',
+      id: '4',
+      status: 'одобрена',
+    },
+    {
+      updatedAt: '',
+      createdAt: '',
+      beneficiary: 'beneficiary',
+      organizer: 'organizer',
+      essence: 'essence',
+      title: 'title',
+      id: '4',
+      status: 'отказана',
+    },
+  ]
+  return (
+    <DataGrid
+      style={{
+        background: theme.palette.common.white,
+        position: 'absolute',
+        height: 'calc(100vh - 300px)',
+        border: 'none',
+        width: 'calc(100% - 48px)',
+        left: '24px',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        borderRadius: '0 0 13px 13px',
+      }}
+      rows={data || []}
+      columns={columns}
+      editMode="row"
+      pageSizeOptions={[20, 50, 100]}
+    />
+  )
+}

src/components/admin/campaign-applications/EditPage.tsx

@@ -1,35 +1,40 @@
-import { CampaignApplicationFormData } from 'components/client/campaign-application/helpers/campaignApplication.types'
+import { Box } from '@mui/material'
 import CampaignApplication from 'components/client/campaign-application/steps/CampaignApplication'
 import CampaignApplicationDetails from 'components/client/campaign-application/steps/CampaignApplicationDetails'
 import CampaignApplicationOrganizer from 'components/client/campaign-application/steps/CampaignApplicationOrganizer'
 import GenericForm from 'components/common/form/GenericForm'
 import AdminContainer from 'components/common/navigation/AdminContainer'
 import AdminLayout from 'components/common/navigation/AdminLayout'
+import CampaignApplicationAdminPropsEdit from './CampaignApplicationAdminPropsEdit'
+import { CampaignApplicationAdminEdit } from './campaignApplicationAdmin.types'
 
 export default function EditPage() {
   const initialValues = {
     organizer: {
-      name: '',
-      phone: '',
-      email: '',
+      name: 'Some organizer',
+      phone: '+35999999',
+      email: '[email protected]',
     },
-  } as CampaignApplicationFormData
+
+    status: 'review',
+    ticketUrl: 'https://trello.com/this-campaign-application',
+  } as CampaignApplicationAdminEdit
 
   return (
     <AdminLayout>
       <AdminContainer title={'Кандидат Кампании'}>
-        Will layout all the steps from the stepper plus the admin step
-        <GenericForm<CampaignApplicationFormData>
+        <GenericForm<CampaignApplicationAdminEdit>
           onSubmit={(v) => console.log(v)}
           initialValues={initialValues}>
           <CampaignApplicationOrganizer />
+          <div>.</div>
+          <CampaignApplication />
+          <div>.</div>
+          <CampaignApplicationDetails />
+          <div>.</div>
+          <CampaignApplicationAdminPropsEdit />
         </GenericForm>
-        <div>.</div>
-        <CampaignApplication />
-        <div>.</div>
-        <CampaignApplicationDetails />
-        <div>.</div>
-        Edit the status and ticket URL here
+        <Box pb="5" />
       </AdminContainer>
     </AdminLayout>
   )

src/components/admin/campaign-applications/campaignApplicationAdmin.types.ts

@@ -0,0 +1,6 @@
+import { CampaignApplicationFormData } from 'components/client/campaign-application/helpers/campaignApplication.types'
+
+export type CampaignApplicationAdminEdit = CampaignApplicationFormData & {
+  status: string
+  ticketUrl?: string
+}

src/pages/admin/campaign-applications/edit/[id].tsx

@@ -1,7 +1,11 @@
 import EditPage from 'components/admin/campaign-applications/EditPage'
 
 import { securedPropsWithTranslation } from 'middleware/auth/securedProps'
+import { GetServerSideProps } from 'next'
 
-export const getServerSideProps = securedPropsWithTranslation()
+export const getServerSideProps: GetServerSideProps = securedPropsWithTranslation(
+  ['common', 'auth', 'validation', 'campaigns', 'campaign-application'],
+  '',
+)
 
 export default EditPage

src/pages/admin/campaign-applications/index.tsx

@@ -1,6 +1,10 @@
 import CampaignApplications from 'components/admin/campaign-applications/CampaignApplications'
 import { securedPropsWithTranslation } from 'middleware/auth/securedProps'
+import { GetServerSideProps } from 'next'
 
-export const getServerSideProps = securedPropsWithTranslation()
+export const getServerSideProps: GetServerSideProps = securedPropsWithTranslation(
+  ['common', 'auth', 'validation', 'campaigns', 'campaign-application'],
+  '',
+)
 
 export default CampaignApplications