From a399391cf7af033d8c7547acaaa9f456f3f83706 Mon Sep 17 00:00:00 2001
From: Grady Berry Ward <grady@siliconally.org>
Date: Tue, 19 Dec 2023 08:15:24 -0700
Subject: [PATCH] Frontend for Portfolio Groups (#85)

---
 frontend/components/form/EditorField.vue      |   2 +-
 frontend/components/form/Field.vue            |   4 +-
 .../components/modal/MissingTranslations.vue  |  74 ++++--
 frontend/components/portfolio/ListView.vue    | 224 ++++++++++++++++
 .../components/portfolio/group/Editor.vue     |  44 ++++
 .../components/portfolio/group/ListView.vue   | 200 +++++++++++++++
 .../components/portfolio/group/NewModal.vue   |  80 ++++++
 .../portfolio/group/membership/MenuButton.vue | 177 +++++++++++++
 frontend/components/standard/Debug.vue        |  17 +-
 frontend/components/standard/Modal.vue        |   3 +
 frontend/composables/useModal.ts              |   6 +
 frontend/lang/en.json                         |  64 ++++-
 frontend/lib/editor/incomplete_upload.ts      |   4 +-
 frontend/lib/editor/index.ts                  |   5 +-
 frontend/lib/editor/initiative.ts             |   2 +-
 frontend/lib/editor/pacta_version.ts          |   4 +-
 frontend/lib/editor/portfolio.ts              |  13 +-
 frontend/lib/editor/portfolio_group.ts        |  39 +++
 frontend/lib/editor/user.ts                   |   2 +-
 frontend/lib/editor/utils.ts                  |   4 +-
 frontend/openapi/generated/pacta/index.ts     |   8 +
 .../pacta/models/ListPortfolioGroupsReq.ts    |   6 +
 .../pacta/models/ListPortfolioGroupsResp.ts   |  11 +
 .../generated/pacta/models/Portfolio.ts       |   5 +
 .../generated/pacta/models/PortfolioGroup.ts  |  30 +++
 .../pacta/models/PortfolioGroupChanges.ts     |  16 ++
 .../pacta/models/PortfolioGroupCreate.ts      |  16 ++
 .../models/PortfolioGroupMembershipIds.ts     |  16 ++
 .../PortfolioGroupMembershipPortfolio.ts      |  15 ++
 .../PortfolioGroupMembershipPortfolioGroup.ts |  15 ++
 .../pacta/services/DefaultService.ts          | 132 ++++++++++
 frontend/pages/portfolios.vue                 | 241 +++++++-----------
 32 files changed, 1290 insertions(+), 189 deletions(-)
 create mode 100644 frontend/components/portfolio/ListView.vue
 create mode 100644 frontend/components/portfolio/group/Editor.vue
 create mode 100644 frontend/components/portfolio/group/ListView.vue
 create mode 100644 frontend/components/portfolio/group/NewModal.vue
 create mode 100644 frontend/components/portfolio/group/membership/MenuButton.vue
 create mode 100644 frontend/lib/editor/portfolio_group.ts
 create mode 100644 frontend/openapi/generated/pacta/models/ListPortfolioGroupsReq.ts
 create mode 100644 frontend/openapi/generated/pacta/models/ListPortfolioGroupsResp.ts
 create mode 100644 frontend/openapi/generated/pacta/models/PortfolioGroup.ts
 create mode 100644 frontend/openapi/generated/pacta/models/PortfolioGroupChanges.ts
 create mode 100644 frontend/openapi/generated/pacta/models/PortfolioGroupCreate.ts
 create mode 100644 frontend/openapi/generated/pacta/models/PortfolioGroupMembershipIds.ts
 create mode 100644 frontend/openapi/generated/pacta/models/PortfolioGroupMembershipPortfolio.ts
 create mode 100644 frontend/openapi/generated/pacta/models/PortfolioGroupMembershipPortfolioGroup.ts

diff --git a/frontend/components/form/EditorField.vue b/frontend/components/form/EditorField.vue
index 5b08ea8..7b0d172 100644
--- a/frontend/components/form/EditorField.vue
+++ b/frontend/components/form/EditorField.vue
@@ -30,7 +30,7 @@ const slots = useSlots()
 const helpTextSlotExists = computed(() => slots['help-text'] !== undefined)
 const valid = computed(() => isValid(props.editorField, props.editorValue))
 const hasValidation = computed(() => (props.editorField.validation ?? []).length > 0)
-const loadingLabel = computed(() => props.editorField.loadingLabel ?? tt('Loading...'))
+const loadingLabel = computed(() => props.editorField.loadingLabel ?? tt('Loading'))
 const invalidLabel = computed(() => props.editorField.invalidLabel ?? tt('Needs Attention'))
 const validLabel = computed(() => props.editorField.validLabel ?? '')
 const startHelpTextExpanded = computed(() => props.editorField.startHelpTextExpanded ?? false)
diff --git a/frontend/components/form/Field.vue b/frontend/components/form/Field.vue
index 80e3ded..dac9221 100644
--- a/frontend/components/form/Field.vue
+++ b/frontend/components/form/Field.vue
@@ -22,10 +22,10 @@ const props = withDefaults(defineProps<Props>(), {
   helpText: '',
   startHelpTextExpanded: true,
   isLoading: false,
-  loadingLabel: 'Loading...',
+  loadingLabel: undefined,
   hasValidation: false,
   isValid: false,
-  invalidLabel: 'Needs Attention',
+  invalidLabel: undefined,
   validLabel: '',
 })
 
diff --git a/frontend/components/modal/MissingTranslations.vue b/frontend/components/modal/MissingTranslations.vue
index 93f710b..a1bc165 100644
--- a/frontend/components/modal/MissingTranslations.vue
+++ b/frontend/components/modal/MissingTranslations.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { $axios, $missingTranslations } = useNuxtApp()
-const { missingTranslations: { missingTranslationsVisible } } = useModal()
+const { loading: { withLoading }, missingTranslations: { missingTranslationsVisible } } = useModal()
 const { t } = useI18n()
 
 const prefix = 'components/modal/MissingTranslations'
@@ -8,26 +8,30 @@ const existing = useState<Map<string, string>>(`${prefix}.existing`, () => new M
 const languages = ['en', 'es', 'fr', 'de']
 const tt = (key: string) => t(`${prefix}.${key}`)
 
-onMounted(async () => {
-  for (const lang of languages) {
-    const langData = await $axios({
-      method: 'get',
-      url: `/_nuxt/lang/${lang}.json`,
-      transformResponse: (res) => res,
-      responseType: 'json',
-    }).then((r) => {
-      return r.data
-    })
-    existing.value.set(lang, langData)
-  }
-})
+const onOpen = async () => {
+  await withLoading(() => Promise.all(languages.map((lang) => $axios({
+    method: 'get',
+    url: `/_nuxt/lang/${lang}.json`,
+    transformResponse: (res) => res,
+    responseType: 'json',
+  }).then((r) => {
+    existing.value.set(lang, r.data)
+  }))), `${prefix}.onOpen`)
+}
 
-const constructIdealMap = (lang: string): Map<string, Map<string, string>> => {
+const constructIdealMap = (lang: string): { map: Map<string, Map<string, string>>, errors: string[], missing: Set<string> } => {
+  const errors: string[] = []
   const ideal = new Map<string, Map<string, string>>()
 
   const e = existing.value.get(lang)
   if (e) {
-    const asObj = JSON.parse(e) as Map<string, Map<string, string>>
+    let asObj: Map<string, Map<string, string>>
+    try {
+      asObj = JSON.parse(e) as Map<string, Map<string, string>>
+    } catch (e: any) {
+      errors.push(`Error parsing ${lang} JSON: ${e}`)
+      return { map: ideal, errors, missing: new Set<string>() }
+    }
     for (const [prefix, values] of Object.entries(asObj)) {
       let m = ideal.get(prefix)
       if (!m) {
@@ -36,7 +40,7 @@ const constructIdealMap = (lang: string): Map<string, Map<string, string>> => {
       }
       for (const [key, value] of Object.entries(values as Map<string, string>)) {
         if (m.has(key)) {
-          throw new Error(`Duplicate key ${key} in ${prefix}`)
+          errors.push(`Duplicate key ${key} in ${prefix}`)
         }
         m.set(key, value)
       }
@@ -46,7 +50,7 @@ const constructIdealMap = (lang: string): Map<string, Map<string, string>> => {
   for (const key of missing) {
     const splits = key.split('.')
     if (splits.length < 2) {
-      throw new Error(`Invalid key structure '${key}'`)
+      errors.push(`Invalid key structure '${key}'`)
     }
     const file = splits[0]
     const actualKey = splits.slice(1).join('.')
@@ -56,12 +60,12 @@ const constructIdealMap = (lang: string): Map<string, Map<string, string>> => {
       ideal.set(file, m)
     }
     if (m.has(actualKey)) {
-      throw new Error(`Duplicate key ${actualKey} in ${file}`)
+      errors.push(`Duplicate key ${actualKey} in ${file}`)
     }
     ideal.set(file, m.set(actualKey, `TODO - ${actualKey}`))
   }
 
-  return ideal
+  return { map: ideal, errors, missing }
 }
 const mapToJson = (map: Map<string, Map<string, string>>): string => {
   const obj = Object.fromEntries(
@@ -84,14 +88,19 @@ interface TabValue {
   language: string
   ideal: string
   numMissing: number
+  errors: string[]
+  missing: Set<string>
 }
 const tabs = computed<TabValue[]>(() => {
   const result: TabValue[] = []
   for (const lang of languages) {
+    const { map, errors, missing } = constructIdealMap(lang)
     result.push({
       language: lang,
-      ideal: mapToJson(constructIdealMap(lang)),
+      ideal: mapToJson(map),
       numMissing: ($missingTranslations.values.value.get(lang) ?? new Set()).size,
+      errors,
+      missing,
     })
   }
   return result
@@ -103,6 +112,7 @@ const tabs = computed<TabValue[]>(() => {
     v-model:visible="missingTranslationsVisible"
     header="Missing Translations"
     sub-header="A set of tools to help you find and fix missing translations"
+    @opened="onOpen"
   >
     <PVTabView>
       <PVTabPanel
@@ -122,12 +132,34 @@ const tabs = computed<TabValue[]>(() => {
               :file-name="`${tab.language}-${new Date().getTime()}.json`"
             />
           </div>
+          <StandardDebug
+            :label="`Errors (${tab.errors.length})`"
+            :value="tab.errors"
+            always
+          />
+          <StandardDebug
+            :label="`Missing ${tab.numMissing} Translation Strings`"
+            :value="Array.from(tab.missing).sort()"
+            always
+          />
           <div class="code">
             {{ tab.ideal }}
           </div>
         </div>
       </PVTabPanel>
     </PVTabView>
+    <StandardDebug
+      :value="languages"
+      label="Languages"
+    />
+    <StandardDebug
+      :value="constructIdealMap('en')"
+      label="EN Ideal"
+    />
+    <StandardDebug
+      :value="tabs"
+      label="Tabs"
+    />
   </StandardModal>
 </template>
 
diff --git a/frontend/components/portfolio/ListView.vue b/frontend/components/portfolio/ListView.vue
new file mode 100644
index 0000000..038d55d
--- /dev/null
+++ b/frontend/components/portfolio/ListView.vue
@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { portfolioEditor } from '@/lib/editor'
+import { type Portfolio, type PortfolioGroup } from '@/openapi/generated/pacta'
+
+const {
+  humanReadableTimeFromStandardString,
+  humanReadableDateFromStandardString,
+} = useTime()
+const pactaClient = usePACTA()
+const { loading: { withLoading } } = useModal()
+const i18n = useI18n()
+const { t } = i18n
+
+interface Props {
+  portfolios: Portfolio[]
+  portfolioGroups: PortfolioGroup[]
+  selectedPortfolioIds: string[]
+  selectedPortfolioGroupIds: string[]
+}
+const props = defineProps<Props>()
+interface Emits {
+  (e: 'update:selectedPortfolioIds', value: string[]): void
+  (e: 'update:selectedPortfolioGroupIds', value: string[]): void
+  (e: 'refresh'): void
+}
+const emit = defineEmits<Emits>()
+
+const refresh = () => { emit('refresh') }
+
+const selectedPortfolioIDs = computed({
+  get: () => props.selectedPortfolioIds ?? [],
+  set: (value: string[]) => { emit('update:selectedPortfolioIds', value) },
+})
+
+interface EditorObject extends ReturnType<typeof portfolioEditor> {
+  id: string
+}
+
+const prefix = 'components/portfolio/ListView'
+const tt = (s: string) => t(`${prefix}.${s}`)
+const expandedRows = useState<EditorObject[]>(`${prefix}.expandedRows`, () => [])
+const selectedRows = computed<EditorObject[]>({
+  get: () => {
+    const ids = selectedPortfolioIDs.value
+    return editorObjects.value.filter((editorObject) => ids.includes(editorObject.id))
+  },
+  set: (value: EditorObject[]) => {
+    const ids = value.map((row) => row.id)
+    ids.sort()
+    selectedPortfolioIDs.value = ids
+  },
+})
+
+const editorObjects = computed<EditorObject[]>(() => props.portfolios.map((item) => ({ ...portfolioEditor(item, i18n), id: item.id })))
+
+const selectedPortfolios = computed<Portfolio[]>(() => selectedRows.value.map((row) => row.currentValue.value))
+
+const saveChanges = (id: string) => {
+  const index = editorObjects.value.findIndex((editorObject) => editorObject.id === id)
+  const eo = presentOrFileBug(editorObjects.value[index])
+  return withLoading(
+    () => pactaClient.updatePortfolio(id, eo.changes.value).then(refresh),
+    `${prefix}.saveChanges`,
+  )
+}
+const deletePortfolio = (id: string) => withLoading(
+  () => pactaClient.deletePortfolio(id),
+  `${prefix}.deletePortfolio`,
+)
+const deleteSelected = () => Promise.all([selectedRows.value.map((row) => deletePortfolio(row.id))]).then(refresh)
+</script>
+
+<template>
+  <div class="flex flex-column gap-3">
+    <div class="flex gap-2 flex-wrap">
+      <PVButton
+        icon="pi pi-refresh"
+        class="p-button-outlined p-button-secondary"
+        :label="tt('Refresh')"
+        @click="refresh"
+      />
+      <PortfolioGroupMembershipMenuButton
+        :selected-portfolios="selectedPortfolios"
+        :portfolio-groups="props.portfolioGroups"
+        @changed-memberships="refresh"
+        @changed-groups="refresh"
+      />
+      <PVButton
+        v-if="selectedRows && selectedRows.length > 0"
+        icon="pi pi-trash"
+        class="p-button-outlined p-button-danger"
+        :label="`${tt('Delete')} (${selectedRows.length})`"
+        @click="deleteSelected"
+      />
+    </div>
+    <PVDataTable
+      v-model:selection="selectedRows"
+      v-model:expanded-rows="expandedRows"
+      :value="editorObjects"
+      data-key="id"
+      size="small"
+      sort-field="editorValues.value.createdAt.originalValue"
+      :sort-order="-1"
+    >
+      <PVColumn selection-mode="multiple" />
+      <PVColumn
+        field="editorValues.value.createdAt.originalValue"
+        :header="tt('Created At')"
+        sortable
+      >
+        <template #body="slotProps">
+          {{ humanReadableTimeFromStandardString(slotProps.data.editorValues.value.createdAt.originalValue).value }}
+        </template>
+      </PVColumn>
+      <PVColumn
+        field="editorValues.value.name.originalValue"
+        sortable
+        :header="tt('Name')"
+      />
+      <PVColumn
+        :header="tt('Memberships')"
+      >
+        <template #body="slotProps">
+          <div class="flex flex-column gap-2">
+            <div class="flex gap-1 align-items-center flex-wrap">
+              <span>{{ tt('Groups') }}:</span>
+              <span
+                v-for="membership in slotProps.data.editorValues.value.groups.originalValue"
+                :key="membership.portfolioGroup.id"
+                class="p-tag p-tag-rounded"
+              >
+                {{ membership.portfolioGroup.name }}
+              </span>
+            </div>
+            <div class="flex gap-2 align-items-center flex-wrap">
+              <span>{{ tt('Initiatives') }}:</span>
+              <span
+                v-for="membership in slotProps.data.editorValues.value.memberships"
+                :key="membership"
+                class="p-tag p-tag-rounded"
+              >
+                {{ membership }}
+              </span>
+            </div>
+          </div>
+        </template>
+      </PVColumn>
+      <PVColumn
+        expander
+        :header="tt('Details')"
+      />
+      <template
+        #expansion="slotProps"
+      >
+        <div class="surface-100 p-3">
+          <h2 class="mt-0">
+            {{ tt('Metadata') }}
+          </h2>
+          <div class="flex flex-column gap-2 w-fit">
+            <div class="flex gap-2 justify-content-between">
+              <span>{{ tt('Created At') }}</span>
+              <b>{{ humanReadableTimeFromStandardString(slotProps.data.editorValues.value.createdAt.originalValue).value }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>{{ tt('Number of Rows') }}</span>
+              <b>{{ slotProps.data.editorValues.value.numberOfRows.originalValue }}</b>
+            </div>
+            <div class="flex gap-2 justify-content-between">
+              <span>{{ tt('Holdings Date') }}</span>
+              <b>{{ humanReadableDateFromStandardString(slotProps.data.editorValues.value.holdingsDate.originalValue.time).value }}</b>
+            </div>
+          </div>
+          <h2 class="mt-5">
+            {{ tt('Editable Properties') }}
+          </h2>
+          <PortfolioEditor
+            v-model:editor-values="slotProps.data.editorValues.value"
+            :editor-fields="slotProps.data.editorFields.value"
+          />
+          <div class="flex gap-3 justify-content-between">
+            <PVButton
+              icon="pi pi-trash"
+              class="p-button-danger p-button-outlined"
+              :label="tt('Delete')"
+              @click="() => deletePortfolio(slotProps.data.id)"
+            />
+            <div v-tooltip.bottom="slotProps.data.saveTooltip">
+              <PVButton
+                :disabled="!slotProps.data.canSave.value"
+                :label="tt('Save Changes')"
+                icon="pi pi-save"
+                icon-pos="right"
+                @click="() => saveChanges(slotProps.data.id)"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </PVDataTable>
+    <div class="flex flex-wrap gap-3 w-full justify-content-between">
+      <LinkButton
+        class="p-button-outlined"
+        icon="pi pi-arrow-left"
+        to="/upload"
+        :label="tt('Upload New Portfolios')"
+      />
+      <!-- TODO(grady) Hook this up to something. -->
+      <PVButton
+        class="p-button-outlined"
+        :label="tt('How To Run a Report')"
+        icon="pi pi-question-circle"
+        icon-pos="right"
+      />
+    </div>
+    <StandardDebug
+      :value="selectedPortfolios"
+      label="Selected Portfolios"
+    />
+    <StandardDebug
+      :value="props.portfolios"
+      label="All Portfolios"
+    />
+  </div>
+</template>
diff --git a/frontend/components/portfolio/group/Editor.vue b/frontend/components/portfolio/group/Editor.vue
new file mode 100644
index 0000000..c4e9fee
--- /dev/null
+++ b/frontend/components/portfolio/group/Editor.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+  type EditorPortfolioGroupFields as EditorFields,
+  type EditorPortfolioGroupValues as EditorValues,
+} from '@/lib/editor'
+
+interface Props {
+  editorValues: EditorValues
+  editorFields: EditorFields
+}
+interface Emits {
+  (e: 'update:editorValues', evs: EditorValues): void
+}
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const efs = computed(() => props.editorFields)
+const evs = computed({
+  get: () => props.editorValues,
+  set: (evs) => { emit('update:editorValues', evs) },
+})
+</script>
+
+<template>
+  <div>
+    <FormEditorField
+      :editor-field="efs.name"
+      :editor-value="evs.name"
+    >
+      <PVInputText
+        v-model="evs.name.currentValue"
+      />
+    </FormEditorField>
+    <FormEditorField
+      :editor-field="efs.description"
+      :editor-value="evs.description"
+    >
+      <PVTextarea
+        v-model="evs.description.currentValue"
+        auto-resize
+      />
+    </FormEditorField>
+  </div>
+</template>
diff --git a/frontend/components/portfolio/group/ListView.vue b/frontend/components/portfolio/group/ListView.vue
new file mode 100644
index 0000000..44b5419
--- /dev/null
+++ b/frontend/components/portfolio/group/ListView.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { portfolioGroupEditor } from '@/lib/editor'
+import { type Portfolio, type PortfolioGroup, type PortfolioGroupMembershipPortfolio } from '@/openapi/generated/pacta'
+
+const {
+  humanReadableTimeFromStandardString,
+} = useTime()
+const pactaClient = usePACTA()
+const { loading: { withLoading }, newPortfolioGroup: { newPortfolioGroupVisible } } = useModal()
+const i18n = useI18n()
+const { t } = i18n
+
+interface Props {
+  portfolios: Portfolio[]
+  portfolioGroups: PortfolioGroup[]
+  selectedPortfolioIds: string[]
+  selectedPortfolioGroupIds: string[]
+}
+const props = defineProps<Props>()
+interface Emits {
+  (e: 'update:selectedPortfolioIds', value: string[]): void
+  (e: 'update:selectedPortfolioGroupIds', value: string[]): void
+  (e: 'refresh'): void
+}
+const emit = defineEmits<Emits>()
+
+const selectedPortfolioGroupIDs = computed({
+  get: () => props.selectedPortfolioGroupIds ?? [],
+  set: (value: string[]) => { emit('update:selectedPortfolioGroupIds', value) },
+})
+
+interface EditorObject extends ReturnType<typeof portfolioGroupEditor> {
+  id: string
+}
+
+const prefix = 'components/portfolio/group/ListView'
+const tt = (s: string) => t(`${prefix}.${s}`)
+
+const editorObjects = computed<EditorObject[]>(() => props.portfolioGroups.map((item) => ({ ...portfolioGroupEditor(item, i18n), id: item.id })))
+
+const expandedRows = useState<EditorObject[]>(`${prefix}.expandedRows`, () => [])
+const selectedRows = computed<EditorObject[]>({
+  get: () => {
+    return editorObjects.value.filter((editorObject) => selectedPortfolioGroupIDs.value.includes(editorObject.id))
+  },
+  set: (value: EditorObject[]) => {
+    selectedPortfolioGroupIDs.value = value.map((row) => row.id)
+  },
+})
+
+const deletePortfolioGroup = (id: string) => withLoading(
+  () => pactaClient.deletePortfolioGroup(id).then(() => {
+    expandedRows.value = expandedRows.value.filter((row) => row.id !== id)
+    emit('refresh')
+  }),
+  `${prefix}.deletePortfolioGroup`,
+)
+const deleteSelected = () => Promise.all([selectedRows.value.map((row) => deletePortfolioGroup(row.id))]).then(() => { emit('refresh') })
+const saveChanges = (id: string) => {
+  const index = editorObjects.value.findIndex((editorObject) => editorObject.id === id)
+  const eo = presentOrFileBug(editorObjects.value[index])
+  return withLoading(
+    () => pactaClient.updatePortfolioGroup(id, eo.changes.value)
+      .then(() => pactaClient.findPortfolioGroupById(id))
+      .then((portfolio) => {
+        editorObjects.value[index] = { ...portfolioGroupEditor(portfolio, i18n), id }
+      }),
+    `${prefix}.saveChanges`,
+  )
+}
+const editorObjectToIds = (editorObject: EditorObject): string[] => {
+  return (editorObject.editorValues.value.members.originalValue ?? []).map((m: PortfolioGroupMembershipPortfolio) => m.portfolio.id)
+}
+</script>
+
+<template>
+  <div class="flex flex-column gap-3">
+    <div class="flex gap-2 flex-wrap">
+      <PVButton
+        icon="pi pi-refresh"
+        class="p-button-outlined p-button-secondary"
+        :label="tt('Refresh')"
+        @click="() => emit('refresh')"
+      />
+      <PVButton
+        v-if="selectedRows && selectedRows.length > 0"
+        icon="pi pi-trash"
+        class="p-button-outlined p-button-danger"
+        :label="`${tt('Delete')} (${selectedRows.length})`"
+        @click="deleteSelected"
+      />
+    </div>
+    <PVDataTable
+      v-model:selection="selectedRows"
+      v-model:expanded-rows="expandedRows"
+      :value="editorObjects"
+      data-key="id"
+      class="portfolio-group-upload-table w-full"
+      size="small"
+      sort-field="editorValues.value.createdAt.originalValue"
+      :sort-order="-1"
+    >
+      <PVColumn selection-mode="multiple" />
+      <PVColumn
+        field="editorValues.value.name.originalValue"
+        sortable
+        :header="tt('Name')"
+      />
+      <PVColumn
+        field="editorValues.value.createdAt.originalValue"
+        :header="tt('Created At')"
+        sortable
+      >
+        <template #body="slotProps">
+          {{ humanReadableTimeFromStandardString(slotProps.data.editorValues.value.createdAt.originalValue).value }}
+        </template>
+      </PVColumn>
+      <PVColumn
+        :header="tt('Number of Members')"
+      >
+        <template #body="slotProps">
+          <LinkButton
+            :disabled="editorObjectToIds(slotProps.data).length === 0"
+            :to="`/portfolios?activeIndex=0&pids=${ editorObjectToIds(slotProps.data).join(',')}`"
+            :label="`${editorObjectToIds(slotProps.data).length}`"
+            icon="pi pi-arrow-right"
+            class="py-1 px-2 p-button-outlined p-button-secondary"
+            icon-pos="right"
+          />
+        </template>
+      </PVColumn>
+      <PVColumn
+        expander
+        header="Details"
+      />
+      <template
+        #expansion="slotProps"
+      >
+        <div class="surface-100 p-3">
+          <h2 class="mt-0">
+            Metadata
+          </h2>
+          <div class="flex flex-column gap-2 w-fit">
+            <div class="flex gap-2 justify-content-between">
+              <span>Created At</span>
+              <b>{{ humanReadableTimeFromStandardString(slotProps.data.editorValues.value.createdAt.originalValue).value }}</b>
+            </div>
+          </div>
+          <h2 class="mt-5">
+            Editable Properties
+          </h2>
+          <PortfolioGroupEditor
+            v-model:editor-values="slotProps.data.editorValues.value"
+            :editor-fields="slotProps.data.editorFields.value"
+          />
+          <div class="flex gap-3 justify-content-between">
+            <PVButton
+              icon="pi pi-trash"
+              class="p-button-danger p-button-outlined"
+              :label="tt('Delete')"
+              @click="() => deletePortfolioGroup(slotProps.data.id)"
+            />
+            <div v-tooltip.bottom="slotProps.data.saveTooltip">
+              <PVButton
+                :disabled="!slotProps.data.canSave.value"
+                :label="tt('Save Changes')"
+                icon="pi pi-save"
+                icon-pos="right"
+                @click="() => saveChanges(slotProps.data.id)"
+              />
+            </div>
+          </div>
+          <StandardDebug
+            :value="slotProps.data.editorFields.value"
+            label="Editor Fields"
+          />
+          <StandardDebug
+            :value="slotProps.data.editorValues.value"
+            label="Editor Values"
+          />
+        </div>
+      </template>
+    </PVDataTable>
+    <div class="flex flex-wrap gap-3 w-full justify-content-between">
+      <PVButton
+        class="p-button-outlined"
+        icon="pi pi-plus"
+        :label="tt('New Portfolio Group')"
+        @click="() => newPortfolioGroupVisible = true"
+      />
+      <!-- TODO(grady) Hook this up to something. -->
+      <PVButton
+        class="p-button-outlined"
+        :label="tt('How To Run a Report')"
+        icon="pi pi-question-circle"
+        icon-pos="right"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/components/portfolio/group/NewModal.vue b/frontend/components/portfolio/group/NewModal.vue
new file mode 100644
index 0000000..f7bacec
--- /dev/null
+++ b/frontend/components/portfolio/group/NewModal.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { portfolioGroupEditor } from '@/lib/editor'
+
+const prefix = 'portfolio/group/NewModal'
+const pactaClient = usePACTA()
+const { loading: { withLoading }, newPortfolioGroup: { newPortfolioGroupVisible } } = useModal()
+const i18n = useI18n()
+const { t } = i18n
+
+interface Emits {
+  (e: 'created'): void
+}
+const emit = defineEmits<Emits>()
+
+const defaultPortfolioGroup = {
+  id: '',
+  name: '',
+  description: '',
+  createdAt: '',
+  members: [],
+}
+const {
+  editorFields,
+  editorValues,
+  currentValue: portfolioGroup,
+  saveTooltip,
+  canSave,
+} = portfolioGroupEditor(defaultPortfolioGroup, i18n)
+const discard = () => { newPortfolioGroupVisible.value = false }
+const save = () => withLoading(
+  () => pactaClient.createPortfolioGroup(portfolioGroup.value)
+    .then(() => { emit('created'); newPortfolioGroupVisible.value = false }),
+  `${prefix}.save`,
+)
+const tt = (key: string) => t(`components/portfolio/group/NewModal.${key}`)
+
+const header = computed(() => tt('New Portfolio Group'))
+const subHeader = computed(() => tt('You can do things here like create a portfolio group'))
+</script>
+
+<template>
+  <StandardModal
+    v-model:visible="newPortfolioGroupVisible"
+    :header="header"
+    :sub-header="subHeader"
+  >
+    <p>
+      TODO(#80) Copy Goes Here
+    </p>
+    <PortfolioGroupEditor
+      v-model:editorValues="editorValues"
+      :editor-fields="editorFields"
+    />
+    <div class="flex gap-3">
+      <PVButton
+        :label="tt('Discard')"
+        icon="pi pi-arrow-left"
+        class="p-button-secondary p-button-outlined"
+        @click="discard"
+      />
+      <div v-tooltip.bottom="saveTooltip">
+        <PVButton
+          :disabled="!canSave"
+          :label="tt('Save')"
+          icon="pi pi-arrow-right"
+          icon-pos="right"
+          @click="save"
+        />
+      </div>
+    </div>
+    <StandardDebug
+      :value="editorFields"
+      label="Editor Fields"
+    />
+    <StandardDebug
+      :value="editorValues"
+      label="Editor Values"
+    />
+  </StandardModal>
+</template>
diff --git a/frontend/components/portfolio/group/membership/MenuButton.vue b/frontend/components/portfolio/group/membership/MenuButton.vue
new file mode 100644
index 0000000..7b66a41
--- /dev/null
+++ b/frontend/components/portfolio/group/membership/MenuButton.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type OverlayPanel from 'primevue/overlaypanel'
+import { useToast } from 'primevue/usetoast'
+import { type Portfolio, type PortfolioGroup } from '@/openapi/generated/pacta'
+
+const { t } = useI18n()
+const toast = useToast()
+const { newPortfolioGroup: { newPortfolioGroupVisible } } = useModal()
+const pactaClient = usePACTA()
+
+interface Props {
+  portfolioGroups: PortfolioGroup[]
+  selectedPortfolios: Portfolio[]
+}
+const props = defineProps<Props>()
+interface Emits {
+  (e: 'changed-memberships'): void
+  (e: 'changed-groups'): void
+}
+const emit = defineEmits<Emits>()
+
+const prefix = 'components/portfolio/group/membership/MenuButton'
+const tt = (s: string) => t(`${prefix}.${s}`)
+const visible = useState<boolean>(`${prefix}.visible`, () => false)
+
+const overlayPanel = useState<OverlayPanel>(`${prefix}.overlayPanel`)
+const toggleMenu = (event: Event) => {
+  presentOrFileBug(overlayPanel.value).toggle(event)
+  visible.value = !visible.value
+}
+
+const changeMemberships = (portfolioGroupId: string, add: boolean) => {
+  return async (event: Event) => {
+    const portfolioIds = props.selectedPortfolios.map((portfolio) => portfolio.id)
+    if (add) {
+      await Promise.all(portfolioIds.map((portfolioId) => pactaClient.createPortfolioGroupMembership({ portfolioId, portfolioGroupId })))
+    } else {
+      await Promise.all(portfolioIds.map((portfolioId) => pactaClient.deletePortfolioGroupMembership({ portfolioId, portfolioGroupId })))
+    }
+    emit('changed-memberships')
+    toast.add({
+      severity: 'success',
+      group: add ? 'portfolio-group-membership-added' : 'portfolio-group-membership-removed',
+    })
+  }
+}
+const changedGroups = () => {
+  emit('changed-groups')
+}
+
+type Icon = 'empty' | 'partial' | 'full'
+
+const groupOptions = computed(() => {
+  const selected = props.selectedPortfolios
+  const result = props.portfolioGroups.map((pg) => {
+    const isMember = selected.map((portfolio) => (portfolio.groups ?? []).some((pg2) => pg.id === pg2.portfolioGroup.id))
+    const anySelected = isMember.some(m => m)
+    const allSelected = isMember.every(m => m)
+    let icon: Icon = 'empty'
+    let addIfClick = true
+    let hoverText = tt('Add all portfolios to group')
+    if (allSelected) {
+      icon = 'full'
+      addIfClick = false
+      hoverText = tt('Remove all portfolios from group')
+    } else if (anySelected) {
+      // TODO(grady) make a pi-square-minus
+      icon = 'partial'
+      addIfClick = true
+      hoverText = tt('Add unselected portfolios to group')
+    }
+    return {
+      id: pg.id,
+      label: pg.name,
+      icon,
+      cmd: changeMemberships(pg.id, addIfClick),
+      hoverText,
+      created: pg.createdAt,
+    }
+  })
+  // Created is an ISO date time string. This sorts by newest first, without having
+  // to parse the date.
+  result.sort((a, b) => a.created < b.created ? 1 : -1)
+  return result
+})
+</script>
+
+<template>
+  <div>
+    <PVButton
+      v-if="props.selectedPortfolios && props.selectedPortfolios.length > 0"
+      :class="visible ? '' : 'p-button-outlined'"
+      :label="tt('Group Memberships')"
+      icon="pi pi-sitemap"
+      @click="toggleMenu"
+    />
+    <PVOverlayPanel
+      ref="overlayPanel"
+      :pt="{ content: { class: 'p-0' } }"
+      @hide="() => { visible = false }"
+      @show="() => { visible = true }"
+    >
+      <div class="flex flex-column align-items-stretch">
+        <div class="font-bold text-xl p-3 border-bottom-1 border-600 flex gap-2 align-items-center">
+          <span>{{ tt('Group Memberships') }}</span>
+          <PVButton
+            icon="pi pi-times"
+            class="p-button-text px-1 py-0 w-auto h-auto p-button-secondary"
+            @click="toggleMenu"
+          />
+        </div>
+        <div
+          v-for="option in groupOptions"
+          :key="option.id"
+          class="border-bottom-1 border-400"
+        >
+          <PVButton
+            v-tooltip="option.hoverText"
+            class="text-left p-button-text w-full"
+            @click="option.cmd"
+          >
+            <div class="flex justify-content-start align-items-center gap-3">
+              <div
+                class="pseudo-checkbox flex-0 border-2 border-round flex justify-content-center align-items-center"
+                :class="option.icon === 'empty' ? 'bg-white' : 'bg-primary-500 text-white border-primary-500'"
+              >
+                <i
+                  v-if="option.icon === 'full'"
+                  class="pi pi-check text-base"
+                />
+                <i
+                  v-if="option.icon === 'partial'"
+                  class="pi pi-minus"
+                  style="font-size: .8rem"
+                />
+              </div>
+              <div class="flex-1 w-full">
+                {{ option.label }}
+              </div>
+            </div>
+          </PVButton>
+        </div>
+        <PVButton
+          :label="tt('Create New Group')"
+          icon="pi pi-plus"
+          class="p-button-text align-self-center p-button-secondary"
+          @click="() => newPortfolioGroupVisible = true"
+        />
+      </div>
+    </PVOverlayPanel>
+
+    <PVToast
+      position="bottom-right"
+      group="portfolio-group-membership"
+      :dismissable="true"
+    >
+      <template #message>
+        <div class="flex flex-column gap-2">
+          <div>{{ tt('Added OK') }} </div>
+        </div>
+      </template>
+    </PVToast>
+
+    <PortfolioGroupNewModal
+      @created="changedGroups"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+// Note, these styles are meant to match the size of the PV checkboxes, which we cannot
+// use directly because of the mixed (dash) state here. They appear to be 1.25rem wide.
+.pseudo-checkbox {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+</style>
diff --git a/frontend/components/standard/Debug.vue b/frontend/components/standard/Debug.vue
index 66a4a67..81377a2 100644
--- a/frontend/components/standard/Debug.vue
+++ b/frontend/components/standard/Debug.vue
@@ -12,6 +12,21 @@ interface Props {
 }
 const props = withDefaults(defineProps<Props>(), { always: false, label: undefined })
 const label = computed(() => props.label ?? tt('Debugging Information'))
+const valueAsStr = computed(() => JSON.stringify(props.value, createCircularReplacer(), 2))
+
+function createCircularReplacer (): (this: any, key: string, value: any) => any {
+  const seen = new WeakSet()
+  return function (this: any, key: string, value: any) {
+    if (typeof value === 'object' && value !== null) {
+      if (seen.has(value)) {
+        return '#REF'
+      }
+      seen.add(value)
+    }
+    return value
+  }
+}
+
 </script>
 
 <template>
@@ -27,7 +42,7 @@ const label = computed(() => props.label ?? tt('Debugging Information'))
       <div
         class="code surface-50"
       >
-        {{ JSON.stringify(props.value, null, 2) }}
+        {{ valueAsStr }}
       </div>
     </PVAccordionTab>
   </PVAccordion>
diff --git a/frontend/components/standard/Modal.vue b/frontend/components/standard/Modal.vue
index a625a4e..0b7357a 100644
--- a/frontend/components/standard/Modal.vue
+++ b/frontend/components/standard/Modal.vue
@@ -10,6 +10,7 @@ interface Props {
 interface Emits {
   (e: 'update:visible', value: boolean): void
   (e: 'closed'): void
+  (e: 'opened'): void
 }
 const props = withDefaults(defineProps<Props>(), {
   small: false,
@@ -24,6 +25,7 @@ const visible = computed<boolean>({
 const breakpoints = computed(() => props.small ? smallDialogBreakpoints : dialogBreakpoints)
 
 const onHide = () => { emit('closed') }
+const onShow = () => { emit('opened') }
 </script>
 
 <template>
@@ -36,6 +38,7 @@ const onHide = () => { emit('closed') }
     :draggable="false"
     :breakpoints="breakpoints"
     @hide="onHide"
+    @show="onShow"
   >
     <template #header>
       <div class="flex justify-content-between align-items-center w-full">
diff --git a/frontend/composables/useModal.ts b/frontend/composables/useModal.ts
index b392d04..112423d 100644
--- a/frontend/composables/useModal.ts
+++ b/frontend/composables/useModal.ts
@@ -63,6 +63,9 @@ export const useModal = () => {
     permissionDeniedVisible.value = true
   }
 
+  // newPortfolioGroup
+  const newPortfolioGroupVisible = newModalVisibilityState('newPortfolioGroupVisibile')
+
   const anyBlockingModalOpen = computed(() => anyModalVisible.value || loading.value)
 
   return {
@@ -92,5 +95,8 @@ export const useModal = () => {
     missingTranslations: {
       missingTranslationsVisible,
     },
+    newPortfolioGroup: {
+      newPortfolioGroupVisible,
+    },
   }
 }
diff --git a/frontend/lang/en.json b/frontend/lang/en.json
index ece6023..1fc3ee9 100644
--- a/frontend/lang/en.json
+++ b/frontend/lang/en.json
@@ -1,4 +1,3 @@
-
 {
   "UserToolbar": {},
   "components/CopyToClipboardButton": {
@@ -7,6 +6,10 @@
   "components/DownloadButton": {
     "Downloaded": "Downloaded"
   },
+  "components/form/EditorField": {
+    "Loading": "Loading...",
+    "Needs Attention": "Needs Attention"
+  },
   "components/form/Field": {
     "Loading": "Loading...",
     "Required": "Required"
@@ -57,6 +60,50 @@
     "Subheading": "You aren't authorized to view this page",
     "Technical Error": "Technical Error"
   },
+  "components/portfolio/Editor": {
+    "Administrator Debugging Access Enabled": "Administrator Debugging Access Enabled",
+    "No Administrator Access Enabled": "No Administrator Access Enabled"
+  },
+  "components/portfolio/ListView": {
+    "Created At": "Created At",
+    "Details": "Details",
+    "Groups": "Groups",
+    "How To Run a Report": "How To Run a Report",
+    "Initiatives": "Initiatives",
+    "Memberships": "Groups",
+    "Name": "Name",
+    "Upload New Portfolios": "Upload New Portfolios",
+    "Delete": "Delete",
+    "Editable Properties": "Editable Properties",
+    "Holdings Date": "Holdings Date",
+    "Metadata": "Metadata",
+    "Number of Rows": "Number of Rows",
+    "Save Changes": "Save Changes",
+    "Refresh": "Refresh"
+  },
+  "components/portfolio/group/ListView": {
+    "Created At": "Created At",
+    "Name": "Name",
+    "Number of Members": "Number of Members",
+    "Save Changes": "Save Changes",
+    "Delete": "Delete",
+    "New Portfolio Group": "New Portfolio Group",
+    "How To Run a Report": "How To Run a Report",
+    "Refresh": "Refresh"
+  },
+  "components/portfolio/group/NewModal": {
+    "Discard": "Discard",
+    "New Portfolio Group": "New Portfolio Group",
+    "Save": "Save",
+    "You can do things here like create a portfolio group": "Portfolio groups are a way to organize your portfolios for analysis or recordkeeping. You can create a portfolio group by clicking the button below."
+  },
+  "components/portfolio/group/membership/MenuButton": {
+    "Add all portfolios to group": "Add selected portfolios to group",
+    "Add unselected portfolios to group": "Add selected portfolios to this group",
+    "Create New Group": "Create New Group",
+    "Group Memberships": "Manage Group Memberships",
+    "Remove all portfolios from group": "Remove selected portfolios from this group"
+  },
   "components/standard/Debug": {
     "Debugging Information": "Debugging Information"
   },
@@ -108,6 +155,17 @@
     "You can change": "You can change this behavior on the",
     "edit initiative page": "edit initiative page"
   },
+  "lib/editor/portfolio_group": {
+    "Created At": "Created At",
+    "Description": "Description",
+    "ID": "ID",
+    "Members": "Members",
+    "Name": "Name"
+  },
+  "lib/editor/utils": {
+    "AllChangesSaved": "All Changes Saved",
+    "CannotSaveWithInvalidFields": "Cannot save with invalid fields"
+  },
   "pages/join": {
     "Accept Invitation": "Accept Invitation",
     "Join Initiative:": "Join Initiative:",
@@ -118,5 +176,9 @@
     "do-accept": "Do you want to accept this invitation?",
     "if-accept": "If you accept this invitation, you'll be able to add your portfolios to the project, where they will be included in aggregated analysis. You aren't required to accept this invitation if you just want to run the analysis on your own, but joining the initiative may enable you to access internal benefits, like the ability to see the analysis results from the aggregated portfolios.",
     "what-shared": "If you accept X, Y, Z will be whared with the initiative administrators, but A, B, C will not be."
+  },
+  "pages/portfolios": {
+    "Portfolio Groups": "Portfolio Groups",
+    "Portfolios": "Portfolios"
   }
 }
\ No newline at end of file
diff --git a/frontend/lib/editor/incomplete_upload.ts b/frontend/lib/editor/incomplete_upload.ts
index c844654..754e87d 100644
--- a/frontend/lib/editor/incomplete_upload.ts
+++ b/frontend/lib/editor/incomplete_upload.ts
@@ -6,7 +6,7 @@ export type EditorIncompleteUploadFields = EditorFieldsFor<IncompleteUpload>
 export type EditorIncompleteUploadValues = EditorValuesFor<IncompleteUpload>
 
 const createEditorIncompleteUploadFields = (translation: Translation): EditorIncompleteUploadFields => {
-  const tt = (key: string) => translation.t(`lib/editor/incomplete_upload/${key}`)
+  const tt = (key: string) => translation.t(`lib/editor/incomplete_upload.${key}`)
   return {
     id: {
       name: 'id',
@@ -56,5 +56,5 @@ const createEditorIncompleteUploadFields = (translation: Translation): EditorInc
 }
 
 export const incompleteUploadEditor = (i: IncompleteUpload, translation: Translation): EditorComputedValues<IncompleteUpload> => {
-  return getEditorComputedValues(`lib/editor/incompleteUpload[${i.id}]`, i, createEditorIncompleteUploadFields, translation)
+  return getEditorComputedValues(`lib/editor/incomplete_upload[${i.id}]`, i, createEditorIncompleteUploadFields, translation)
 }
diff --git a/frontend/lib/editor/index.ts b/frontend/lib/editor/index.ts
index 15b13ed..f1e409f 100644
--- a/frontend/lib/editor/index.ts
+++ b/frontend/lib/editor/index.ts
@@ -1,6 +1,7 @@
 export * from './common'
+export * from './incomplete_upload'
 export * from './initiative'
 export * from './pacta_version'
-export * from './user'
-export * from './incomplete_upload'
 export * from './portfolio'
+export * from './portfolio_group'
+export * from './user'
diff --git a/frontend/lib/editor/initiative.ts b/frontend/lib/editor/initiative.ts
index 90885ca..66e8877 100644
--- a/frontend/lib/editor/initiative.ts
+++ b/frontend/lib/editor/initiative.ts
@@ -6,7 +6,7 @@ export type EditorInitiativeFields = EditorFieldsFor<Initiative>
 export type EditorInitiativeValues = EditorValuesFor<Initiative>
 
 const createEditorInitiativeFields = (translation: Translation): EditorInitiativeFields => {
-  const tt = (key: string) => translation.t(`lib/editor/initiative/${key}`)
+  const tt = (key: string) => translation.t(`lib/editor/initiative.${key}`)
   return {
     id: {
       name: 'id',
diff --git a/frontend/lib/editor/pacta_version.ts b/frontend/lib/editor/pacta_version.ts
index af1be14..5b3b707 100644
--- a/frontend/lib/editor/pacta_version.ts
+++ b/frontend/lib/editor/pacta_version.ts
@@ -6,7 +6,7 @@ export type EditorPactaVersionFields = EditorFieldsFor<PactaVersion>
 export type EditorPactaVersionValues = EditorValuesFor<PactaVersion>
 
 const createEditorPactaVersionFields = (translation: Translation): EditorPactaVersionFields => {
-  const tt = (key: string) => translation.t(`lib/editor/pacta-version/${key}`)
+  const tt = (key: string) => translation.t(`lib/editor/pacta-version.${key}`)
   return {
     id: {
       name: 'id',
@@ -43,7 +43,7 @@ const createEditorPactaVersionFields = (translation: Translation): EditorPactaVe
 
 export const pactaVersionEditor = (pv: PactaVersion, translation: Translation): EditorComputedValues<PactaVersion> => {
   return getEditorComputedValues(
-    'lib/editor/pacta-version',
+    'lib/editor/pacta_version',
     pv,
     createEditorPactaVersionFields,
     translation)
diff --git a/frontend/lib/editor/portfolio.ts b/frontend/lib/editor/portfolio.ts
index d93c967..16ce439 100644
--- a/frontend/lib/editor/portfolio.ts
+++ b/frontend/lib/editor/portfolio.ts
@@ -6,7 +6,7 @@ export type EditorPortfolioFields = EditorFieldsFor<Portfolio>
 export type EditorPortfolioValues = EditorValuesFor<Portfolio>
 
 const createEditorPortfolioFields = (translation: Translation): EditorPortfolioFields => {
-  const tt = (key: string) => translation.t(`lib/editor/portfolio/${key}`)
+  const tt = (key: string) => translation.t(`lib/editor/portfolio.${key}`)
   return {
     id: {
       name: 'id',
@@ -16,21 +16,22 @@ const createEditorPortfolioFields = (translation: Translation): EditorPortfolioF
       name: 'name',
       label: tt('Name'),
       validation: [Validation.NotEmpty],
-      helpText: tt('The name of this portfolio.'),
+      helpText: tt('NameHelpText'),
     },
     description: {
       name: 'description',
       label: tt('Description'),
-      helpText: tt('The description of this portfolio - helpful for record keeping, not used for anything besides organization.'),
+      helpText: tt('DescriptionHelpText'),
     },
     adminDebugEnabled: {
       name: 'adminDebugEnabled',
       label: tt('Admin Debugging Enabled'),
-      helpText: tt('When enabled, this portfolio can be accessed by administrators to help with debugging. Only turn this on if you\'re comfortable with system administrators accessing this data.'),
+      helpText: tt('AdminDebuggingEnabledHelpText'),
     },
     holdingsDate: {
       name: 'holdingsDate',
       label: tt('Holdings Date'),
+      helpText: tt('HoldingsDateHelpText'),
     },
     createdAt: {
       name: 'createdAt',
@@ -40,6 +41,10 @@ const createEditorPortfolioFields = (translation: Translation): EditorPortfolioF
       name: 'numberOfRows',
       label: tt('Number of Rows'),
     },
+    groups: {
+      name: 'groups',
+      label: tt('Groups'),
+    },
   }
 }
 
diff --git a/frontend/lib/editor/portfolio_group.ts b/frontend/lib/editor/portfolio_group.ts
new file mode 100644
index 0000000..4cc7d3e
--- /dev/null
+++ b/frontend/lib/editor/portfolio_group.ts
@@ -0,0 +1,39 @@
+import { type PortfolioGroup } from '@/openapi/generated/pacta'
+import { Validation, type EditorFieldsFor, type EditorValuesFor, type EditorComputedValues } from './common'
+import { getEditorComputedValues, type Translation } from './utils'
+
+export type EditorPortfolioGroupFields = EditorFieldsFor<PortfolioGroup>
+export type EditorPortfolioGroupValues = EditorValuesFor<PortfolioGroup>
+
+const createEditorPortfolioGroupFields = (translation: Translation): EditorPortfolioGroupFields => {
+  const tt = (key: string) => translation.t(`lib/editor/portfolio_group.${key}`)
+  return {
+    id: {
+      name: 'id',
+      label: tt('ID'),
+    },
+    name: {
+      name: 'name',
+      label: tt('Name'),
+      validation: [Validation.NotEmpty],
+      helpText: tt('NameHelpText'),
+    },
+    description: {
+      name: 'description',
+      label: tt('Description'),
+      helpText: tt('DescriptionHelpText'),
+    },
+    createdAt: {
+      name: 'createdAt',
+      label: tt('Created At'),
+    },
+    members: {
+      name: 'members',
+      label: tt('Members'),
+    },
+  }
+}
+
+export const portfolioGroupEditor = (i: PortfolioGroup, translation: Translation): EditorComputedValues<PortfolioGroup> => {
+  return getEditorComputedValues(`lib/editor/portfolio_group[${i.id}]`, i, createEditorPortfolioGroupFields, translation)
+}
diff --git a/frontend/lib/editor/user.ts b/frontend/lib/editor/user.ts
index 14eaecb..2e3cf6b 100644
--- a/frontend/lib/editor/user.ts
+++ b/frontend/lib/editor/user.ts
@@ -6,7 +6,7 @@ export type EditorUserFields = EditorFieldsFor<User>
 export type EditorUserValues = EditorValuesFor<User>
 
 const createEditorUserFields = (translation: Translation): EditorUserFields => {
-  const tt = (key: string) => translation.t(`lib/editor/user/${key}`)
+  const tt = (key: string) => translation.t(`lib/editor/user.${key}`)
   return {
     id: {
       name: 'id',
diff --git a/frontend/lib/editor/utils.ts b/frontend/lib/editor/utils.ts
index 95f9c23..673f11e 100644
--- a/frontend/lib/editor/utils.ts
+++ b/frontend/lib/editor/utils.ts
@@ -45,8 +45,8 @@ export const getEditorComputedValues = <R> (key: string, r: R, toEFF: ToEFF<R>,
   const isInvalid = computed(() => invalidFields.value.length > 0)
   const canSave = computed(() => hasChanges.value && !isInvalid.value)
   const { t } = translation
-  const allSaved = t('lib/editor/utils/AllChangesSaved')
-  const cannotSave = t('lib/editor/utils/CannotSaveWithInvalidFields')
+  const allSaved = t('lib/editor/utils.AllChangesSaved')
+  const cannotSave = t('lib/editor/utils.CannotSaveWithInvalidFields')
   const saveTooltip = computed<string | undefined>(() => {
     if (!hasChanges.value) { return allSaved }
     if (isInvalid.value) { return `${cannotSave}: ${invalidFields.value.join(', ')}` }
diff --git a/frontend/openapi/generated/pacta/index.ts b/frontend/openapi/generated/pacta/index.ts
index a157015..1c6a49a 100644
--- a/frontend/openapi/generated/pacta/index.ts
+++ b/frontend/openapi/generated/pacta/index.ts
@@ -27,6 +27,8 @@ export type { InitiativeUserRelationshipChanges } from './models/InitiativeUserR
 export { Language } from './models/Language';
 export type { ListIncompleteUploadsReq } from './models/ListIncompleteUploadsReq';
 export type { ListIncompleteUploadsResp } from './models/ListIncompleteUploadsResp';
+export type { ListPortfolioGroupsReq } from './models/ListPortfolioGroupsReq';
+export type { ListPortfolioGroupsResp } from './models/ListPortfolioGroupsResp';
 export type { ListPortfoliosReq } from './models/ListPortfoliosReq';
 export type { ListPortfoliosResp } from './models/ListPortfoliosResp';
 export type { NewPortfolioAsset } from './models/NewPortfolioAsset';
@@ -37,6 +39,12 @@ export type { ParsePortfolioReq } from './models/ParsePortfolioReq';
 export type { ParsePortfolioResp } from './models/ParsePortfolioResp';
 export type { Portfolio } from './models/Portfolio';
 export type { PortfolioChanges } from './models/PortfolioChanges';
+export type { PortfolioGroup } from './models/PortfolioGroup';
+export type { PortfolioGroupChanges } from './models/PortfolioGroupChanges';
+export type { PortfolioGroupCreate } from './models/PortfolioGroupCreate';
+export type { PortfolioGroupMembershipIds } from './models/PortfolioGroupMembershipIds';
+export type { PortfolioGroupMembershipPortfolio } from './models/PortfolioGroupMembershipPortfolio';
+export type { PortfolioGroupMembershipPortfolioGroup } from './models/PortfolioGroupMembershipPortfolioGroup';
 export type { StartPortfolioUploadReq } from './models/StartPortfolioUploadReq';
 export type { StartPortfolioUploadReqItem } from './models/StartPortfolioUploadReqItem';
 export type { StartPortfolioUploadResp } from './models/StartPortfolioUploadResp';
diff --git a/frontend/openapi/generated/pacta/models/ListPortfolioGroupsReq.ts b/frontend/openapi/generated/pacta/models/ListPortfolioGroupsReq.ts
new file mode 100644
index 0000000..cfd4049
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/ListPortfolioGroupsReq.ts
@@ -0,0 +1,6 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type ListPortfolioGroupsReq = Record<string, any>;
diff --git a/frontend/openapi/generated/pacta/models/ListPortfolioGroupsResp.ts b/frontend/openapi/generated/pacta/models/ListPortfolioGroupsResp.ts
new file mode 100644
index 0000000..b590a6a
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/ListPortfolioGroupsResp.ts
@@ -0,0 +1,11 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { PortfolioGroup } from './PortfolioGroup';
+
+export type ListPortfolioGroupsResp = {
+    items: Array<PortfolioGroup>;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/Portfolio.ts b/frontend/openapi/generated/pacta/models/Portfolio.ts
index 43c256d..e7f904c 100644
--- a/frontend/openapi/generated/pacta/models/Portfolio.ts
+++ b/frontend/openapi/generated/pacta/models/Portfolio.ts
@@ -4,6 +4,7 @@
 /* eslint-disable */
 
 import type { HoldingsDate } from './HoldingsDate';
+import type { PortfolioGroupMembershipPortfolioGroup } from './PortfolioGroupMembershipPortfolioGroup';
 
 export type Portfolio = {
     /**
@@ -31,5 +32,9 @@ export type Portfolio = {
      * The number of rows in the portfolio
      */
     numberOfRows: number;
+    /**
+     * The list of portfolio groups that this portfolio is a member of
+     */
+    groups?: Array<PortfolioGroupMembershipPortfolioGroup>;
 };
 
diff --git a/frontend/openapi/generated/pacta/models/PortfolioGroup.ts b/frontend/openapi/generated/pacta/models/PortfolioGroup.ts
new file mode 100644
index 0000000..411d432
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/PortfolioGroup.ts
@@ -0,0 +1,30 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { PortfolioGroupMembershipPortfolio } from './PortfolioGroupMembershipPortfolio';
+
+export type PortfolioGroup = {
+    /**
+     * the system assigned id of the portfolio group
+     */
+    id: string;
+    /**
+     * the human meaningful name of the portfoio group
+     */
+    name: string;
+    /**
+     * the description of the contents or purpose of the portfolio group
+     */
+    description: string;
+    /**
+     * the list of portfolios that are members of this portfolio group
+     */
+    members?: Array<PortfolioGroupMembershipPortfolio>;
+    /**
+     * The time at which this initiative was created.
+     */
+    createdAt: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/PortfolioGroupChanges.ts b/frontend/openapi/generated/pacta/models/PortfolioGroupChanges.ts
new file mode 100644
index 0000000..48a9f52
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/PortfolioGroupChanges.ts
@@ -0,0 +1,16 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type PortfolioGroupChanges = {
+    /**
+     * the human meaningful name of the portfolio group
+     */
+    name?: string;
+    /**
+     * the description of the contents or purpose of the portfolio group
+     */
+    description?: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/PortfolioGroupCreate.ts b/frontend/openapi/generated/pacta/models/PortfolioGroupCreate.ts
new file mode 100644
index 0000000..1258afe
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/PortfolioGroupCreate.ts
@@ -0,0 +1,16 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type PortfolioGroupCreate = {
+    /**
+     * the human meaningful name of the portfolio group
+     */
+    name: string;
+    /**
+     * an optional description of the contents or purpose of the portfolio group
+     */
+    description: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipIds.ts b/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipIds.ts
new file mode 100644
index 0000000..cbc0b33
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipIds.ts
@@ -0,0 +1,16 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+export type PortfolioGroupMembershipIds = {
+    /**
+     * the id of the portfolio member of the portfolio group
+     */
+    portfolioId: string;
+    /**
+     * the id of the portfolio group
+     */
+    portfolioGroupId: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipPortfolio.ts b/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipPortfolio.ts
new file mode 100644
index 0000000..d4a4b1d
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipPortfolio.ts
@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { Portfolio } from './Portfolio';
+
+export type PortfolioGroupMembershipPortfolio = {
+    portfolio: Portfolio;
+    /**
+     * The time at which this membership was created.
+     */
+    createdAt: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipPortfolioGroup.ts b/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipPortfolioGroup.ts
new file mode 100644
index 0000000..bf0fe5b
--- /dev/null
+++ b/frontend/openapi/generated/pacta/models/PortfolioGroupMembershipPortfolioGroup.ts
@@ -0,0 +1,15 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+
+import type { PortfolioGroup } from './PortfolioGroup';
+
+export type PortfolioGroupMembershipPortfolioGroup = {
+    portfolioGroup: PortfolioGroup;
+    /**
+     * The time at which this membership was created.
+     */
+    createdAt: string;
+};
+
diff --git a/frontend/openapi/generated/pacta/services/DefaultService.ts b/frontend/openapi/generated/pacta/services/DefaultService.ts
index a692609..2732d44 100644
--- a/frontend/openapi/generated/pacta/services/DefaultService.ts
+++ b/frontend/openapi/generated/pacta/services/DefaultService.ts
@@ -14,12 +14,17 @@ import type { InitiativeInvitationCreate } from '../models/InitiativeInvitationC
 import type { InitiativeUserRelationship } from '../models/InitiativeUserRelationship';
 import type { InitiativeUserRelationshipChanges } from '../models/InitiativeUserRelationshipChanges';
 import type { ListIncompleteUploadsResp } from '../models/ListIncompleteUploadsResp';
+import type { ListPortfolioGroupsResp } from '../models/ListPortfolioGroupsResp';
 import type { ListPortfoliosResp } from '../models/ListPortfoliosResp';
 import type { PactaVersion } from '../models/PactaVersion';
 import type { PactaVersionChanges } from '../models/PactaVersionChanges';
 import type { PactaVersionCreate } from '../models/PactaVersionCreate';
 import type { Portfolio } from '../models/Portfolio';
 import type { PortfolioChanges } from '../models/PortfolioChanges';
+import type { PortfolioGroup } from '../models/PortfolioGroup';
+import type { PortfolioGroupChanges } from '../models/PortfolioGroupChanges';
+import type { PortfolioGroupCreate } from '../models/PortfolioGroupCreate';
+import type { PortfolioGroupMembershipIds } from '../models/PortfolioGroupMembershipIds';
 import type { StartPortfolioUploadReq } from '../models/StartPortfolioUploadReq';
 import type { StartPortfolioUploadResp } from '../models/StartPortfolioUploadResp';
 import type { User } from '../models/User';
@@ -407,6 +412,133 @@ export class DefaultService {
         });
     }
 
+    /**
+     * Returns the portfolio groups that the user has access to
+     * @returns ListPortfolioGroupsResp
+     * @throws ApiError
+     */
+    public listPortfolioGroups(): CancelablePromise<ListPortfolioGroupsResp> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/portfolio-groups',
+        });
+    }
+
+    /**
+     * Creates a portfolio group
+     * Creates a new portfolio group
+     * @param requestBody Initial portfolio group object properties
+     * @returns PortfolioGroup portfolio group created successfully
+     * @throws ApiError
+     */
+    public createPortfolioGroup(
+        requestBody: PortfolioGroupCreate,
+    ): CancelablePromise<PortfolioGroup> {
+        return this.httpRequest.request({
+            method: 'POST',
+            url: '/portfolio-groups',
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+
+    /**
+     * Returns a portfolio group by ID
+     * Returns a portfolio group based on a single ID
+     * @param id ID of portfolio group to fetch
+     * @returns PortfolioGroup portfolio group response
+     * @throws ApiError
+     */
+    public findPortfolioGroupById(
+        id: string,
+    ): CancelablePromise<PortfolioGroup> {
+        return this.httpRequest.request({
+            method: 'GET',
+            url: '/portfolio-group/{id}',
+            path: {
+                'id': id,
+            },
+        });
+    }
+
+    /**
+     * Updates portfolio group properties
+     * Updates a portfolio group's settable properties
+     * @param id ID of the portfolio group to update
+     * @param requestBody Portfolio Group object properties to update
+     * @returns void
+     * @throws ApiError
+     */
+    public updatePortfolioGroup(
+        id: string,
+        requestBody: PortfolioGroupChanges,
+    ): CancelablePromise<void> {
+        return this.httpRequest.request({
+            method: 'PATCH',
+            url: '/portfolio-group/{id}',
+            path: {
+                'id': id,
+            },
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+
+    /**
+     * Deletes a portfolio group by ID
+     * deletes a portfolio group based on the ID supplied - note this does not delete the portfolios that are members to this group
+     * @param id ID of portfolio group to delete
+     * @returns void
+     * @throws ApiError
+     */
+    public deletePortfolioGroup(
+        id: string,
+    ): CancelablePromise<void> {
+        return this.httpRequest.request({
+            method: 'DELETE',
+            url: '/portfolio-group/{id}',
+            path: {
+                'id': id,
+            },
+        });
+    }
+
+    /**
+     * creates a portfolio group membership
+     * creates a portfolio group membership
+     * @param requestBody Portfolio Group membership to create
+     * @returns void
+     * @throws ApiError
+     */
+    public createPortfolioGroupMembership(
+        requestBody: PortfolioGroupMembershipIds,
+    ): CancelablePromise<void> {
+        return this.httpRequest.request({
+            method: 'PUT',
+            url: '/portfolio-group-membership',
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+
+    /**
+     * Deletes a portfolio group membership
+     * removes the membership of a portfolio in a portfolio - note this does not delete the portfolio or the portfolio group
+     * @param requestBody Portfolio Group membership to delete
+     * @returns void
+     * @throws ApiError
+     */
+    public deletePortfolioGroupMembership(
+        requestBody: PortfolioGroupMembershipIds,
+    ): CancelablePromise<void> {
+        return this.httpRequest.request({
+            method: 'DELETE',
+            url: '/portfolio-group-membership',
+            body: requestBody,
+            mediaType: 'application/json',
+        });
+    }
+
     /**
      * Gets the incomplete uploads that the user is the owner of
      * @returns ListIncompleteUploadsResp
diff --git a/frontend/pages/portfolios.vue b/frontend/pages/portfolios.vue
index 0b5b9a2..f69b6a0 100644
--- a/frontend/pages/portfolios.vue
+++ b/frontend/pages/portfolios.vue
@@ -1,178 +1,121 @@
 <script setup lang="ts">
-import { portfolioEditor } from '@/lib/editor'
+const prefix = 'pages/portfolios'
 
-const {
-  humanReadableTimeFromStandardString,
-  humanReadableDateFromStandardString,
-} = useTime()
+const { fromQueryReactive } = useURLParams()
+const { t } = useI18n()
 const pactaClient = usePACTA()
 const { loading: { withLoading } } = useModal()
-const i18n = useI18n()
 
-interface EditorObject extends ReturnType<typeof portfolioEditor> {
-  id: string
-}
+const tt = (s: string) => t(`pages/portfolios.${s}`)
 
-const prefix = 'pages/portfolios'
-const expandedRows = useState<EditorObject[]>(`${prefix}.expandedRows`, () => [])
-const selectedRows = useState<EditorObject[]>(`${prefix}.selectedRows`, () => [])
+const selectedPortfolioIdsQP = fromQueryReactive('pids')
+const selectedPortfolioGroupIdsQP = fromQueryReactive('pgids')
+const activeIndexQP = fromQueryReactive('activeIndex')
 
 const [
-  { data },
+  { data: portfolioData, refresh: refreshPortfoliosApi },
+  { data: portfolioGroupData, refresh: refreshPortfolioGroupsApi },
 ] = await Promise.all([
   useSimpleAsyncData(`${prefix}.portfolios`, () => pactaClient.listPortfolios()),
+  useSimpleAsyncData(`${prefix}.portfolioGroups`, () => pactaClient.listPortfolioGroups()),
 ])
-
-let editorObjects = data.value.items.map((item) => ({ ...portfolioEditor(item, i18n), id: item.id }))
-
-const deletePortfolio = (id: string) => withLoading(
-  () => pactaClient.deletePortfolio(id).then(() => {
-    editorObjects = editorObjects.filter((editorObject) => editorObject.id !== id)
-    expandedRows.value = expandedRows.value.filter((row) => row.id !== id)
-  }),
-  `${prefix}.deletePortfolio`,
-)
-const saveChanges = (id: string) => {
-  const index = editorObjects.findIndex((editorObject) => editorObject.id === id)
-  const eo = presentOrFileBug(editorObjects[index])
-  return withLoading(
-    () => pactaClient.updatePortfolio(id, eo.changes.value)
-      .then(() => pactaClient.findPortfolioById(id))
-      .then((portfolio) => {
-        editorObjects[index] = { ...portfolioEditor(portfolio, i18n), id }
-      }),
-    `${prefix}.saveChanges`,
-  )
+const refreshPortfolios = async () => {
+  await withLoading(refreshPortfoliosApi, `${prefix}.refreshPortfolios`)
+}
+const refreshPortfolioGroups = async () => {
+  await withLoading(refreshPortfolioGroupsApi, `${prefix}.refreshPortfolioGroups`)
+}
+const refreshAll = async () => {
+  console.log('refreshing all')
+  await Promise.all([
+    refreshPortfolios(),
+    refreshPortfolioGroups(),
+  ])
 }
+
+const selectedPortfolioIds = computed<string[]>({
+  get: () => (selectedPortfolioIdsQP.value ?? '').split(','),
+  set: (v: string[]) => {
+    if (v.length === 0) {
+      selectedPortfolioIdsQP.value = undefined
+    } else {
+      v.sort()
+      selectedPortfolioIdsQP.value = v.join(',')
+    }
+  },
+})
+const selectedPortfolioGroupIds = computed<string[]>({
+  get: () => (selectedPortfolioGroupIdsQP.value ?? '').split(','),
+  set: (v: string[]) => {
+    if (v.length === 0) {
+      selectedPortfolioGroupIdsQP.value = undefined
+    } else {
+      v.sort()
+      selectedPortfolioGroupIdsQP.value = v.join(',')
+    }
+  },
+})
+const activeIndex = computed<number>({
+  get: () => parseInt(activeIndexQP.value ?? '0'),
+  set: (v: number) => {
+    activeIndexQP.value = v.toString()
+  },
+})
 </script>
 
 <template>
-  <StandardContent>
-    <TitleBar title="Portfolios" />
+  <StandardContent class="portfolios-page">
+    <TitleBar :title="tt('Portfolios')" />
     <p>
-      This page shows your logical portfolios.
+      TODO(#80) Add Copy Here
     </p>
-    <PVDataTable
-      v-model:selection="selectedRows"
-      v-model:expanded-rows="expandedRows"
-      :value="editorObjects"
-      data-key="id"
-      class="portfolio-upload-table"
-      size="small"
+    <PVTabView
+      v-model:activeIndex="activeIndex"
+      class="w-full"
     >
-      <PVColumn selection-mode="multiple" />
-      <PVColumn
-        field="editorValues.value.createdAt.originalValue"
-        header="Created At"
-        sortable
+      <PVTabPanel
+        :header="tt('Portfolios')"
       >
-        <template #body="slotProps">
-          {{ humanReadableTimeFromStandardString(slotProps.data.editorValues.value.createdAt.originalValue).value }}
-        </template>
-      </PVColumn>
-      <PVColumn
-        field="editorValues.value.name.originalValue"
-        sortable
-        header="Name"
-      />
-      <PVColumn
-        expander
-        header="Details"
-      />
-      <template
-        #expansion="slotProps"
+        <PortfolioListView
+          v-model:selected-portfolio-group-ids="selectedPortfolioGroupIds"
+          v-model:selected-portfolio-ids="selectedPortfolioIds"
+          :portfolios="portfolioData.items"
+          :portfolio-groups="portfolioGroupData.items"
+          @refresh="refreshAll"
+        />
+      </PVTabPanel>
+      <PVTabPanel
+        :header="tt('Portfolio Groups')"
       >
-        <div class="surface-100 p-3">
-          <h2 class="mt-0">
-            Metadata
-          </h2>
-          <div class="flex flex-column gap-2 w-fit">
-            <div class="flex gap-2 justify-content-between">
-              <span>Created At</span>
-              <b>{{ humanReadableTimeFromStandardString(slotProps.data.editorValues.value.createdAt.originalValue).value }}</b>
-            </div>
-            <div class="flex gap-2 justify-content-between">
-              <span>Number of Rows</span>
-              <b>{{ slotProps.data.editorValues.value.numberOfRows.originalValue }}</b>
-            </div>
-            <div class="flex gap-2 justify-content-between">
-              <span>Holdings Date</span>
-              <b>{{ humanReadableDateFromStandardString(slotProps.data.editorValues.value.holdingsDate.originalValue.time).value }}</b>
-            </div>
-          </div>
-          <h2 class="mt-5">
-            Editable Properties
-          </h2>
-          <PortfolioEditor
-            v-model:editor-values="slotProps.data.editorValues.value"
-            :editor-fields="slotProps.data.editorFields"
-          />
-          <div class="flex gap-3 justify-content-between">
-            <PVButton
-              icon="pi pi-trash"
-              class="p-button-danger p-button-outlined"
-              label="Delete"
-              @click="() => deletePortfolio(slotProps.data.id)"
-            />
-            <div v-tooltip.bottom="slotProps.data.saveTooltip">
-              <PVButton
-                :disabled="!slotProps.data.canSave.value"
-                label="Save Changes"
-                icon="pi pi-save"
-                icon-pos="right"
-                @click="() => saveChanges(slotProps.data.id)"
-              />
-            </div>
-          </div>
-          <StandardDebug
-            :value="slotProps.data.editorFields.value"
-            label="Editor Fields"
-          />
-          <StandardDebug
-            :value="slotProps.data.editorValues.value"
-            label="Editor Values"
-          />
-        </div>
-      </template>
-    </PVDataTable>
-    <div class="flex flex-wrap gap-3 w-full justify-content-between">
-      <LinkButton
-        class="p-button-outlined"
-        icon="pi pi-arrow-left"
-        to="/upload"
-        label="Upload New Portfolios"
-      />
-      <!-- TODO(grady) Hook this up to something. -->
-      <PVButton
-        class="p-button-outlined"
-        label="How To Run a Report"
-        icon="pi pi-question-circle"
-        icon-pos="right"
-      />
-    </div>
-    <StandardDebug
-      :value="data"
-      label="Editor Objects"
-    />
-  </standardcontent>
+        <PortfolioGroupListView
+          v-model:selected-portfolio-group-ids="selectedPortfolioGroupIds"
+          v-model:selected-portfolio-ids="selectedPortfolioIds"
+          :portfolios="portfolioData.items"
+          :portfolio-groups="portfolioGroupData.items"
+          @refresh="refreshAll"
+        />
+      </PVTabPanel>
+    </PVTabView>
+  </StandardContent>
 </template>
 
 <style lang="scss">
-.portfolio-upload-table.p-datatable.p-datatable-sm {
-  width: 100%;
+.portfolios-page {
+  .p-datatable.p-datatable-sm {
+    width: 100%;
 
-  .p-datatable-row-expansion td {
-    padding: 0 0.5rem;
-
-  }
+    .p-datatable-row-expansion td {
+      padding: 0 0.5rem;
+    }
 
-  .p-checkbox {
-    width: 1.25rem;
-    height: 1.25rem;
+    .p-checkbox {
+      width: 1.25rem;
+      height: 1.25rem;
 
-    .p-checkbox-box {
-      height: 100%;
-      width: 100%;
+      .p-checkbox-box {
+        height: 100%;
+        width: 100%;
+      }
     }
   }
 }